html - 为什么我的 CSS 菜单在下拉菜单上有重叠的文字

Question

我无法让下拉菜单(子菜单)停止与文本重叠。下面是我的 HTML + CSS。

<ul class="top-menu">
    <li><a href="index.html" >Events </a></li>
    <li>
        <a href="index-1.html">Store</a>
        <ul>
            <li><a href="index-2.html" >Imagination CD</a></li>
            <li><a href="index-2.html" >Total Relax</a></li>
            <li><a href="index-2.html" >Super Study</a></li>
        </ul>    
    </li>   
    </li>
    <li><a href="index-2.html" class="active">About Us</a></li>
    <li><a href="index-3.html">Contact</a></li>
</ul>

.top-menu {
    position: absolute;
    padding: 32px 00 0 10px;
    height: 85px;
}
.top-menu li{
    padding:0 24px 0 0;
}
.top-menu li, .top-menu li a{
    display:block;
    float:left;
}
.top-menu ul, .top-menu ul a{
    position: absolute;
    display: none;
    z-index:999px;
    line-height: 30px;
    top: 12px;
}
.top-menu li a{
    padding:0 0 0 30px;
    color:#4d3925;
    font-size:25px;
    line-height:26px;
    text-decoration:none;
}
.top-menu a:hover, .top-menu .active {
    color:#f29869;
}
.top-menu li:hover ul a,  .top-menu li:hover ul {
    position: abolute;
    display: block;
    padding: 32px 0 0 14px;
    font-size: 16px;
    line-height: 30px;
    z-index: 999px;
}

引用菜单:http://www.nicoheins.com/lux/

Answer 1

这个下拉菜单有很多问题。但是，导致此特定问题的是选择器 .top-menu ul, .top-menu ul a 中的属性 position:absolute;。一旦你摆脱它，你的链接将不再堆叠在一起。

但是您仍然需要做更多的工作才能让您的菜单看起来新鲜。

不是为了堵塞我自己的工作，但我有一个相当不错的下拉列表(我认为，至少)，您可以使用托管在 Github 上。 Check it out here .如果您不想要淡入淡出或箭头，您可以删除它们，然后应用您自己的样式。其余的应该按照您的意愿工作。

修复其他问题的编辑:

同样，最初的问题只是要求解决我在这个下拉列表中注意到的问题之一。另一个是您的子菜单 ul 将父级 li 推向右侧。您可以通过应用此样式来解决此问题:

.top-menu > li {
    position: relative;
}
.top-menu li ul {
    position: absolute;
}

另一个事实是，您所有的 li 都被设置为 float:left;。您只希望顶级 li 以这种方式设置样式。这是本节的案例:

.top-menu li, .top-menu li a{
    display:block;
    float:left;
}

将此更改为

.top-menu > li, .top-menu > li > a{
    display:block;
    float:left;
}

会解决这个问题，但随后您需要将 display:block; 重新应用到子菜单 as。

我想您的下一个问题是子菜单 a 之间的巨大 间距。这是因为您使用此代码定位他们:

.top-menu li:hover ul a,  .top-menu li:hover ul {
    position: abolute;
    display: block;
    padding: 32px 0 0 14px;
    font-size: 16px;
    z-index: 999px;
}

padding-top 相当大!确保你的选择器只选择你想要的，否则你最终会得到像这样的奇怪行为。当您使用诸如下拉列表之类的东西时，这一点尤为重要，它在 li 中包含 li，并且它们的样式需要彼此完全不同。

要全面了解选择器，check out this page .

它的一个功能版本是 here .请注意，我试图尽可能少地更改原始 css。我认为这限制了我编写我认为可以编写的最佳下拉菜单的能力。但这确实有效!

Here's a JSFiddle重写的代码可以完全干净地工作!