懸停的CSS子菜單背景

我想爲自己製作一個小型網站，所以我會以初學者的身份提出這個問題。在懸停主菜單時，我無法成功讓子菜單包含另一個背景。懸停的CSS子菜單背景

HTML：

 <div id="nav"> 
      <ul class="sub1"> 
       <li><a href="#"><h2>Home</h2></a></li> 
       <li><a href="#"><h2>About</h2></a><!---id="onlink"---> 
       <ul class="sub2"> 
        <li><a href="#" title="About Us">Us</a></li> 
        <li><a href="#" title="About Our product">Our product</a></li> 
       </ul> 
       </li> 
      </ul> 
     </div>

CSS：

#nav{ 
width:100%; 
height: 60px; 
padding-top: 20px; 
padding-bottom: 10px; 
} 

#nav ul{ 
margin:0; 
padding:0; 
width: 60%; 
margin: auto; 

} 

#nav ul li{ 
margin:0; 
padding:0; 
list-style: none; 
float:left; 
position:relative; 
background:transparent url(EN/Button_menu_unselected.png); 
} 

#nav ul li ul li{ 
background:aqua; /*Test that doesn't work*/ 
} 

#nav ul li a{ 
text-align:center; 
text-decoration:none; 
height:20px; 
width:100px; 
padding:10px; 
display:block; 
color:#003300; 
} 

#nav ul ul{ 
position:absolute; 
visibility:hidden; 
} 

#nav ul li:hover ul{ 
visibility:visible; 
} 

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
}

下拉項目得到相同的格式，被稱爲「Button_menu_rollover」按鈕，這給了我一個非常壞的結果。

來源

2012-01-30 Trace

先嚐試'background：red;'。我不認爲水色是一種有效的CSS顏色 – Mike 2012-01-30 00:27:27

它是，我以前使用它，它會自動出現（我正在使用Coda）。 – Trace 2012-01-30 00:35:31

工程...對不起， – Mike 2012-01-30 00:37:17

的代碼：

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
}

被施加到所有的元素和子元素。

這修復它，但是這個代碼不會對IE6的工作：

#nav ul li:hover > a{ 
background: #fff; 
}

或者你可以使用JavaScript懸停效果得到確切的結果。

來源

2012-01-30 08:40:13

哦，這就是小箭頭所在的位置:-)對於Internet Explorer 6，現在非常感謝並且太糟糕了！我打算稍後改進我的設計，所以我會再看看它！ – Trace 2012-01-30 17:04:53

懸停的CSS子菜單背景

回答

相關問題