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

【问题标题】：Drop Down Menu is Only Showing One List Item下拉菜单仅显示一个列表项
【发布时间】：2013-06-17 22:10:02
【问题描述】：

我的下拉菜单仅显示子菜单下拉项目之一。我知道我的 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>

【问题讨论】：

标签： css drop-down-menu

【解决方案1】：

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

See an example

补充说明：

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

【讨论】：

【解决方案2】：

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

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

我希望这会有所帮助！

【讨论】：