css - 下拉菜单仅显示一个列表项

Question

我的下拉菜单只显示一个子菜单下拉项。我知道我的 CSS 有问题，但我无法弄清楚。我玩过各种代码，但似乎无法理解。只有一个子菜单。有人可以指出我正确的方向吗？

/** MENU */

#menu {
overflow: visible;
border-top: 1px solid #F78F1E;
color: #FFF;
background: F78F1E;
background-color: F78F1E;
}

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


#menu li {
display: inline-block;
background: #F78F1E;
padding: 0;
}

#menu a {
display:block;
background: #F78F1E;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
}

#menu a:hover, #menu ul li:hover a {

text-decoration: underline;
background-color: #F78F1E;
}


#menu .active a {
background: #F78F1E;
color: #fff;
}


#menu li ul { 
    overflow: visible;

position: absolute;  
display: none; 
margin:0;
padding:0;
} 
#menu li:hover ul { 
display: block; 
        overflow: visible;

} 
#menu li ul li { 
    overflow: hidden;

float: none; 
display: block; 
z-index:1000;


}
#menu li ul li a { 
    overflow: hidden;

width: 100px; 
position: absolute; 
color: #fff; 
z-index:1000;

}
#menu li ul li a:hover { 
background: #F78F1E;
color: #fff; 
z-index:1000;

} 

这是 html:

<div id="menu">
   <ul id="menu">
      <li class="active"><a href="index.html" accesskey="1" title="">Home</a></li>
      <li><a href="about.html" accesskey="2" title="">About Us</a></li>
      <li>
         <a href="#Products" accesskey="3" title="">Shop</a>
         <ul>
            <li><a href="#Products" accesskey="4" title="">Monogrammed Tees</a></li>
            <li><a href="#Products" accesskey="5" title="">Monogrammed Hats</a></li>
            <li><a href="#Products" accesskey="6" title="">Acrylic Jewelry</a></li>
            <li><a href="#Products" accesskey="7" title="">Trendy Tees</a></li>
         </ul>
      </li>
      <li><a href="#" accesskey="8" title="">Fonts</a></li>
      <li><a href="#" accesskey="9" title="">Wholesale</a></li>
      <li><a href="#" accesskey="10" title="">Contact Us</a></li>
      <li><a href="https://www.paypal.com/uk/cgi-bin/webscr?cmd=_flow&amp;SESSION=eDeMFvoOQELfChA_tPg6ymvAbg8fdNxijv45dbrmjRhxORvzvSfrusuhbt8&amp;dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b081989ce41f911b8b0f9abd5cb813489264cd" accesskey="11" title="">cart</a></li>
   </ul>
</div>
</div>

Answer 1

删除 position: absolute来自 #menu li ul li a选择器，它将起作用。

See an example

补充说明:

1. 您定义了 2 个相同的 ID ( id="menu" )，HTML 标准需要唯一的 ID。
2. 您关闭了 2 个 div ( </div>)，但只打开了一个。
3. 这么多不必要的 CSS 属性，它们不会影响您的设计，但可能会在将来造成伤害。