懸停前可見的子菜單加子菜單背景使用父懸停背景

Question

我希望我可以得到一些新鮮的眼睛。我知道我在這裏的某個地方做了一個新手編碼錯誤，但我似乎無法找到它，而我的眼睛正在雙眼交叉。請幫忙。

因此，即使在懸停之前，子菜單仍然可見，並且由於某種原因，每個子菜單項的背景都採用了父懸停的背景屬性，而我無法爲我的生活找出原因。

我做Fiddle

這裏是在情況下，代碼你不想訪問鏈接

HTML

<div id="menu"> 
    <ul> 
     <li class="current_page_item"><a href="home.html">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a> 
     <ul> 
     <li class="style13"><a href="#"><strong>Option 1</strong></a></li> 
     <li class="style13"><a href="#"><strong>Option 2</strong></a></li> 
     </ul></li> 
     <li><a href="#">Comments</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

</div> 

CSS

#menu { 
width: 740px; 
height: 60px; 
margin: 0px auto; 
padding: 0px 20px 0px 20px; 
background: #000033 url(images/menu-wrapper-bg2.png) repeat-x left top; 
} 

#menu ul { 
margin: 0; 
padding: 0px 0px 0px 0px; 
list-style: none; 
line-height: normal; 
} 

#menu ul li { 
float: left; 
padding: 0px 0px 0px 0px; 
} 

#menu ul li a { 
display: block; 
float: left; 
height: 60px; 
margin: 0px; 
padding: 0px 36px 0px 36px; 
line-height: 60px; 
letter-spacing: -1px; 
text-decoration: none; 
text-shadow: 2px 2px 2px #00033; 
font-family: 'Abel', sans-serif;  
font-size: 23px; 
font-weight: normal; 
color: #FFFFFF; 
border: none; 
text-shadow: 2px 2px 2px #0000FF; 
} 

#menu .current_page_item a { 
text-shadow: 2px 2px 2px #0000FF; 
background: #000066; 
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Opera */ 
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, 
#000066), color-stop(1, #000033)); 

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #000066 0%, #000033 100%); 
} 

#menu ul li a:hover { 
background: #000066; 
text-decoration: none; 
text-shadow: 2px 2px 2px #0000FF; 
color: #FFFFFF; 
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Opera */ 
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, 
#000066), color-stop(1, #000033)); 

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%); 

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #000066 0%, #000033 100%); 
} 
#menu ul li ul li.active a, #menu ul li ul li a:hover { 
text-decoration:none; 
color:#000066; 
text-shadow: 2px 2px 2px #0000FF; 
} 
#menu ul li ul { 
height:500px; 
left:289px; 
overflow:visible; 
position:absolute; 
top:69px; 
width:160px; 
float: left; 
} 
#menu ul li ul li:hover ul li ul { 
left:275px; 
top:37px; 
padding-top: 2em; 
padding-left: .90em; 
line-height: 30px!important; 

} 
#menu ul li ul li { 
background: #000066; 
border:1px solid #ffffff; 
float:none; 
height:29px; 
margin:-1px 0 0; 
padding:0 12px; 
position:relative; 
width:auto; 
z-index:1000; 
} 
#menu ul li ul li a { 
color:#ffffff!important; 
font-family:'Abel', sans-serif; 
font-size:20px; 
line-height:22px; 
text-transform:none; 
text-shadow: 2px 2px 2px #0000FF; 
font-weight:0; 
margin:0; 
padding:0; 
display:block; 
padding-top: 5px; 

} 
#menu ul li ul li.active a, #menu ul li ul li a:hover { 
color:#fff!important; 
line-height: 30px!important; 

} 

Answer 1

CSS實際上並不隱藏或顯示子菜單。嘗試添加：

#menu ul ul { 
    display: none; 
} 
#menu li:hover ul{ 
    display: block; 
}