Question

我问过我认识的每个人，我也搜索了这个网站，但没有运气。现在我问你们所有人的帮助。我使用HTML5和CSS3制作我的第二个网站。（第一个是7年前，现在看起来很可怕！）

我当前的包版广告：我在导航栏上的其中一个标签上创建了一个下拉菜单，但它背后是背景图片和页面上的任何其他内容。我尝试在每个可能的地方使用z-index（带位置标记），我没有运气。

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

这是NavBar 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; }

这是来自NavBar正下方的背景图像和简介图像的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

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

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

这里是小提琴

JS Fiddle

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

1 个答案: