子菜單不能在下拉菜單中使用css

我製作了帶翻轉圖像的下拉菜單。翻轉圖像幾乎可以工作（本尼迪克特康伯巴奇打算變成水獺）和一個子菜單下降（目前沒有出現）。子菜單不能在下拉菜單中使用css

我做錯了什麼？這裏是JSfiddle

的HTML >>

<ul id="nav"> 
<li><a href="#" class="about"><img src="http://static.tumblr.com/bw1wxme/Lgsmzv53i/rollover-1.jpg"></a> 
<ul> 
<li><a href="#">1.2.1.1. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.2. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.3. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.4. Sub-Level-3</a></li> 
</ul> 
</li>

的CSS >>

#nav { 
width: 100%; 
float: left; 
margin: 0 0 3em 0; 
padding: 0; 
list-style: none; 
opacity:1; 
} 
#nav li { 
float: left; } 
#nav li a { 
    display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-weight: bold; 
color: #069; 
} 
#nav li a:hover { 
color: #c00; 
background-color: #fff; 
} 

#nav ul { 
list-style-type:none; 
display:none; 
} 

#nav .about:hover {background-image:url('http://static.tumblr.com/bw1wxme/RjMmzv543/rollover-2.jpg');}

來源

2014-01-23 Social Monster

你應該添加到您的CSS：

#nav li:hover ul {display:block;}

顯示它懸停時

向上日期爲JsFiddle

來源

2014-01-23 17:00:51

子菜單不能在下拉菜單中使用css

回答

相關問題