HTML＆CSS：如何讓子菜單下拉？

Question

所以，我在一個網站上工作，突然看到一個問題。我建立了我的菜單，但不幸的是，子菜單只是不工作，就降不下來......我嘗試了很多東西，使其工作...

HTML

<div id="menu"> <ul id="navmenu"> <li><a href="#">Menu 1</a></li> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> </ul> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li style="float:right"><a href="#">Menu 4</a></li> </ul> </div>

CSS

#menu{ 
width: 90%; 
position: fixed; 
text-align: center; 
font-size: 20px; 
background-color: #FF3737; 
border-style: 10px 10px 10px 10px; 
z-index: 1000;} 

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

li{ 
float: left;} 

li a{ 
display: block; 
color: black; 
text-align: center; 
text-decoration: none; 
padding: 15px;} 

li a:hover{ 
display: block; 
background-color: #640909; 
color: white;} 

#navmenu ul.submenu{ 
display: none; 
position: relative;} 

#navmenu li:hover .submenu{ 
position: relative;} 

我會感謝您的幫助！

Answer 1

你必須把你<ul>標籤與.submenu類的父<li>

<div id="menu"> 
    <ul id="navmenu"> 
     <li><a href="#">Menu 1</a> 
     <ul class="submenu"> 
      <li><a href="#">Submenu 1</a></li> 
      <li><a href="#">Submenu 2</a></li> 
      <li><a href="#">Submenu 3</a></li> 
      <li><a href="#">Submenu 4</a></li> 
     </ul> 
     </li> 

     <li><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     <li style="float:right"><a href="#">Menu 4</a></li> 
    </ul> 
</div> 

和更新裏面以下樣式規則

#navmenu ul.submenu 
{ 
display: none; 
} 

#navmenu li:hover .submenu 
{ 
display:inline 
}