下拉菜單隱藏在背景圖片後面

我問過我認識的每個人，也搜索過這個網站，但沒有運氣。現在我請求你們所有人的幫助。我使用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>

下面是從導航條上的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%;}

來源

2014-10-11 Bloomworks

從#nav刪除overflow:hidden它將修復問題

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

這裏是小提琴

JS Fiddle

來源

2014-10-11 15:43:28

OMG！非常感謝！！你只是攢了我3天盯着我的代碼。謝謝！！！解決了。 – Bloomworks 2014-10-11 16:01:28

歡迎您接受我的回答:) – 2014-10-11 16:21:23

下拉菜單隱藏在背景圖片後面

回答

相關問題