0

我无法让我的下拉菜单（子菜单）停止重叠文本。下面是我的 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/

4

1 回答 1

0

此下拉列表存在许多问题。但是，导致此特定问题的原因是position:absolute;您的选择器中的属性.top-menu ul, .top-menu ul a。一旦你摆脱它，你的链接将不再堆叠在彼此之上。

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

不要插入我自己的工作，但我有一个相当不错的下拉列表（我认为，至少），您可以在 Github 上使用托管。在这里查看。如果您不想要淡入淡出或箭头，您可以删除它们，然后应用您自己的样式。其余的应该按照您的意愿工作。

编辑以解决其他问题：

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

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

另一个是你所有的lis 都被设置为float:left;. 您只希望以这种方式设置顶级lis 的样式。本节对此进行了说明：

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

将此更改为

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

会解决这个问题，但是你需要重新应用display:block;到子菜单a。

我想您的下一个问题是子菜单之间的巨大间距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是相当大的！确保你的选择器只选择你想要的，否则你最终会得到这样的奇怪行为。当您使用像下拉列表这样的东西时，这一点尤其重要，它在lis 中包含lis，并且它们需要完全不同的样式。

要全面了解选择器，请查看此页面。

这里有一个功能版本。请注意，我试图css尽可能少地更改原件。我认为这限制了我编写我认为可以编写的最佳下拉列表的能力。但这确实有效！

这是一个 JSFiddle，其中包含完全干净的重写代码！。

于 2012-10-11T03:48:29.277 回答