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

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

但是你仍然需要做更多工作才能让你的菜单焕然一新。

不要插入我自己的工作，但我有一个相当不错的下拉（我认为，至少）你可以在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;重新应用到子菜单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非常大！确保您的选择器仅选择您想要的内容，否则您最终会得到这样的奇怪行为。当您处理类似于下拉列表的内容时，这一点尤其重要，该下拉列表在li内有li个内容，并且它们的样式必须完全不同。

有关选择器的详细概述，check out this page。

此功能版本为here。请注意，我尝试尽可能少地更改原始css。我认为这限制了我写下我认为可写的最佳下拉列表的能力。但这确实有效！

Here's a JSFiddle重写的代码完全干净！

为什么我的css菜单在下拉列表中有文本重叠

1 个答案: