1

我有一个纯 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/

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

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

4

3 回答 3

4

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

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

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

于 2013-05-30T17:01:56.507 回答
1

您还没有覆盖 UL 上的默认填充，因此在您的 Fiddle 中您可以看到菜单是如何移到左侧的，但是当您将鼠标悬停在 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;    
}

这是小提琴

于 2013-05-30T17:12:44.010 回答
0

我倾向于用代码解决所有问题，但一个快速的改变是增加左边距：

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

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

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

于 2013-05-30T17:01:34.960 回答