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

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>

- user2152279

Answer 1

将 #menu li ul li a 选择器中的 position: absolute 删除即可使其正常工作。

查看示例

补充说明:

1. 您定义了两个相同的ID (id="menu")，HTML标准要求使用唯一的ID。
2. 您关闭了两个div (</div>)，但只打开了一个。
3. 有许多不必要的CSS属性对设计没有影响，但在未来可能会有害。

- Slavik Meltser

Answer 2

如果您在li底部输入一些填充，则子菜单项将显示出来。 在下面的示例中，我输入了padding-bottom：45px

#menu li ul li { 
overflow: hidden;
float: none; 
display: block; 
z-index:1000;
padding-bottom:45px;}

希望这可以帮到你！

- mtoregan