隐藏在背景图片后面的下拉菜单

Question

我问过我认识的每个人，我也搜索过这个网站，但没有运气。现在我请大家帮忙。我正在使用 HTML5 和 CSS3 来制作我的第二个网站。 （第一个是 7 年前，现在看起来很糟糕！）

我当前的障碍：我在导航栏的一个选项卡上创建了一个下拉菜单，但它位于背景图像和页面上任何其他内容的后面。我已经尝试在每个可能的位置（带有位置标记）使用 z-index，但我没有任何运气。

任何想法将不胜感激！谢谢。

这是导航栏的 HTML 代码：

<div id="nav"> 
<ul> 
<li><a href="HomePageNew.html">Home</a></li> 
<li><a href="BioNew.html">Bio</a></li> 
<li><a href="GigScheduleNew.html">Gigs</a></li> 
<li><a href="Groups.html">Groups </a>
    <ul>
    <li><a href="#">SB Trio</a></li>
    <li><a href="#">NYGT</a></li>
    <li><a href="#">Qtto Bloomdido</a></li>
    </ul>
</li> 
<li><a href="">Publications</a></li>
<li><a href="">Repairs</a></li>
<li><a href="">Lessons</a></li>
<li><a href="">Contact</a></li>
</ul> 
</div>

这是来自 NavBar 的 CSS：

#nav {    position: relative;   
    top: 0;
    text-align: center;     
    background-color: #FF9933;  
    background-image: url(images/WoodAfromosia.jpg);    
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
    font-size: 130%;}

#nav ul {   list-style: none;   
    padding: 1; 
    margin: 0% 0% 0% 0%;}    

#nav ul li { float: center;
    display:inline-block;
    font-weight: bold; 
    text-transform: uppercase;} 
#nav { overflow: hidden; width: 100%;}

#nav ul li a {display: inline-block;    
padding: .5em; 
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);     
border: 2px solid #000;     
border-radius: .5em; 
margin: 3% 6% 3% 6%;    
white-space:nowrap;}  


#nav ul ul {display: none;}

#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;} 

#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}

#nav li:hover li {  float:none;
overflow: visible;}


#nav ul a:link { color: black;   }  
#nav ul a:visited { color: black;   }  
#nav ul a:focus {   color: blue;  
border-color: #fff; }  
#nav ul a:hover { color: darkviolet; 
border-color: #fff;   }  

#nav ul a:active {color: cyan; }    

这是来自导航栏下方的背景图像和介绍图像的 CSS：

body {  position: relative;
padding: 0;             
margin: 0;
background-color: azure;  
background-image: url(images/Paperwhitebricks.jpg);} 

a {text-decoration: none;}  

#intro {text-align: center;
margin: -1% 0% -.5% 0%;}

Answer 1

从#nav 中删除overflow:hidden 它将解决问题

#nav {
    overflow:hidden /* remove */
    width: 100%;
}

这是小提琴

JS Fiddle