HTML＆amp; 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
}