HTML5菜單下拉不工作

Question

我有一個下拉菜單，我正在爲我的HTML5網站建設，我已經得到了正確的編碼（或者我認爲），並且下拉菜單不會出現在頂層元素中。

我已經通過代碼掃描，據我所知，代碼似乎沒問題。我把下面的代碼，看看你是否能發現錯誤：

<navigation id="NavigationLink" style="" class="navigationStyle"> 
     <section class="menu"> 
     <ul> 
     <li><a class="left_nosub" href="default.html">Home</a></li> 
     <li><a class="center_hassub" href="products.html">Products</a> 
     <ul> 
      <li><a href="graphics.html">Graphic Design</a></li> 
      <li><a href="web.html">Web Design</a></li> 
      <li><a href="cms.html">Content Management Systems</a></li> 
      <li><a href="social-media.html">Social Media Design</a></li> 
     </ul> 
     </li> 
     <li><a class="center_hassub" href="#">News</a> 
     <ul> 
      <li><a href="#">Current Projects</a></li> 
      <li><a href="#">Day-To-Day-Stuff</a></li> 
     </ul> 
     </li> 
     <li><a class="right_nosub" href="#">Contact Us</a></li> 
     </ul> 
     </section> 

.menu { 
font-family: Arial, Helvetica, sans-serif; 
position: relative; 
font-size: 11px; 
margin: 0; 
z-index: 1000; 
} 

.menu ul li a { 
display: block; 
text-decoration: none; 
color: #f0f0f0; 
font-weight: bold; 
width: 80px; 
height: 42px; 
text-align: center; 
border-bottom: 0; 
background-image: url(images/center.png); 
line-height: 48px; 
font-size: 11px; 
overflow: hidden; 
padding-left: 1px; 
} 

.menu .left_nosub { 
background-image: url(images/left.png); 
padding-left: 1px; 
margin-right: -1px;} 

.menu .right_nosub { 
background-image: url(images/right.png);   
} 

.menu ul { 
padding: 0; 
margin: 0; 
list-style: none; 
} 

.menu ul li { 
float: left; 
position: relative; 
} 

.menu ul li ul { 
display: none; 
} 

.menu ul li:hover a { 
color: #000; 
background: url(images/center_hassub.png); 
} 

.menu ul li:hover ul li a.center_hassub { 
background: #6a3; 
color: #000; 
} 

.menu ul li:hover ul li:hover a.center_hassub { 
background: #6fc; 
color: #000; 
} 

.menu ul li:hover ul li ul { 
display: none; 
} 

.menu ul li:hover .left_nosub { 
color: #000; 
background: url(images/left_nosub.png); 
} 

.menu ul li:hover .right_hassub { 
color:#000; 
background: url(images/right_hassub.png); 
} 

.menu ul li:hover .right_nosub { 
color: #000; 
background: url(images/right_nosub.png); 
} 

.menu ul li:hover ul li a { 
background-image: none; 
display: block; 
height: 28px; 
line-height: 26px; 
color: #000; 
width: 142px; 
text-align: left; 
margin: 0; 
padding: 0 0 0 11px; 
font-weight: normal; 
} 

.menu ul li:hover ul{ 
margin: 0 0 0 3px; 
padding: 0; 
background-image: url(images/dropdown.png); 
background-repeat: no-repeat; 
background-position: bottom left; 
} 

.menu ul li:hover ul li a:hover { 
color: #000 !important; 
background-image: url(images/sub_hover.png); 
} 

.menu ul li:hover ul li:hover ul { 
display: block; 
position: absolute; 
left: 105px; 
top: 0; 
} 

.menu ul li:hover ul li:hover ul.left { 
left: -105px; 
} 

.menu ul li:hover ul .sub_active { 
background-image: url(images/sub_active.png); 
margin-right: 1px; 
} 

Answer 1

更改以下類

.menu ul li:hover ul{ 
margin: 0 0 0 3px; 
padding: 0; 
background-image: url(images/dropdown.png); 
background-repeat: no-repeat; 
background-position: bottom left; 
display:block; 
}