Question

我有一个纯CSS菜单（不需要这个javascript），HTML：

<ul id="nav">
    <li>
        <div><a href="#">First Menu</a>
        </div>
        <ul>
            <li><a href="#">First Option</a></li>
            <li><a href="#">Second Option</a></li>
            <li id="subnav"><a href="#">Sub Menu &#8212;>></a>
                <ul>
                    <li><a href="#">First Sub Option</a></li>
                    <li><a href="#">Second Sub Option</a></li>
                    <li><a href="#">Third Sub Option</a></li>
                    <li><a href="#">Fourth Sub Option</a></li>
                </ul>
            </li>
            <li><a href="#">Third Option</a>
            </li>
            <li id="subnav"><a href="#">Second Sub Menu &#8212;>></a>
                <ul>
                    <li><a href="#">Second Sub Menu, First Sub Option</a></li>
                    <li><a href="#">Second Sub Menu, Second Sub Option</a></li>
                </ul>
                <li><a href="#">Fourth Option</a></li>
            </li>
        </ul>
    </li>
    <li>
        <div><a href="#">Second Menu</a>
        </div>
        <ul>
            <li><a href="#">Next First Option</a></li>
            <li><a href="#">Next Second Option</a></li>
        </ul>
     </li>
</ul>

CSS：

#nav, #nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    padding: 0px 1px 0px 1px;
    margin: 0px;
    border: black thin solid;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    font-size: 115%;
    list-style-type: none;
    font-family: sans-serif;
    margin-left: none;
    background-color: #EFAA0D;
    z-index:100;
}
#nav>li {
    float: left;
}
#nav li ul {
    list-style-type: none;
    display: none;
    width:20em;
    position: absolute;
    left: 4px;
    font-weight: normal;
}
#nav li>ul {
    top: auto;
    left: auto;
}
#nav li:hover>ul {
    display: block;
}
#nav li a:hover {
    background-color: #fdca2e;
}
#nav li a:link, #nav li a:visited {
    padding: 0em .25em 0em 0.25em;
    border: black thin solid;
    text-decoration: none;
    display: block;
    left:2px;
}
#nav li>a {
    font-weight: normal;
}
#subnav li a:link, #subnav li a:visited {
    color: #EFAA0D;
    padding: 0em .25em 0em 0.25em;
    border: green thin solid;
    display: block;
    left:2px;
    background-color: black;
}
#subnav li a:hover {
    background-color: #555;
    position: relative;
    left: 1px;
}

请看小提琴：http://jsfiddle.net/sablefoste/wRK9v/7/

我关注的是查看“第三选项”及其他内容。尝试访问这些选项时，它会被“第二选项”的子菜单覆盖。访问的唯一方法是将鼠标滑过填充。

有没有办法解决这个问题？

Answer 1

您已经为无序列表元素留下了默认填充，这就是缩进菜单的内容。填充被视为关于:hover状态的元素的一部分。您首先要将UL元素的填充清零，然后添加您希望缩进的余量[-left]。在这种情况下，您将添加（或者我应该说，合并）：

#nav li ul {
    padding: 0;
    margin-left: 40px;
}

演示：http://jsfiddle.net/wRK9v/8/

Answer 2

您没有覆盖UL上的默认填充，因此在您的小提琴中，您可以看到菜单如何向左移动，但是当您将鼠标悬停在UL“外部”区域时，您仍然可以在技术上将鼠标悬停在第三个UL，它不会消失。

如果覆盖默认填充，左侧空间将消失，但现在所有UL元素都将排成一行，您仍然无法查看菜单的其余部分。

#nav li > ul {
    top: auto;
    left: auto;
    padding-left: 0;
}

如果然后设置了左定位，则可以根据需要显示子菜单的间距或间距。您可以将其应用于所有菜单：

#nav li > ul {
    top: auto;
    left: 100px;
    padding-left: 0;
}

或者专门将其添加到第3级菜单：

#nav li #subnav > ul {
    padding-left: 0px;
    left: 150px;    
}

这是Fiddle

Answer 3

我倾向于想要解决代码中的所有问题，但快速更改是增加左边距：

#nav li ul li ul
{
  margin-left: 17.5em;
  margin-top: -1.5em;
}

我假设您确实希望子菜单位于第二个菜单的右侧，对吧？我会使用硬像素而不是ems来修改缩进。您已经将宽度指定为20em，因此您可以使用它并让子菜单显示在主菜单的右侧。

小提琴：http://jsfiddle.net/wRK9v/12/

纯CSS菜单 - 子菜单覆盖其他选择

3 个答案: