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

附加说明：

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

Answer 2

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

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

我希望这有帮助！

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

2 个答案: