Question

我正在尝试为我的网站制作导航菜单并使用http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ 作为指导。它工作正常，但一旦我尝试添加（id =“coolMenu”）到nav标签，它就会停止工作。

我将它从ul标签中取出并添加到nav标签中，它不再有效。它根本不显示任何内容。做错了什么？

感谢。

下面的HTML代码：

<nav id="coolMenu">
<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li> 
        <a href="#">Periher</a>
            <ul class="noJS">
                <li><a href="#">Hellenico</a></li>
                <li><a href="#">Genere</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>
</ul>
</nav>

下面的css：

/* Structure
------------------------------------------*/
#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a {
    width: 80px;
}
#coolMenu li:hover ul.noJS {
    display: block; 
}


/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}


/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
}
#coolMenu ul li a {
    color: #000;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
}

Answer 1

你的问题在这里：

<nav id="coolMenu">
<ul>

ID标签应该附加到无序列表，它应该是

<nav>
<ul id="coolMenu">

使用编辑来查看您的代码：http://jsfiddle.net/UMTGR/1/

Answer 2

问题在于：

#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}

由于您将ID放在nav元素上，因此主ul设置为display: none，而不是子菜单ul。如果您想在nav上设置ID，则必须更改所有css选择器才能反映出来。

或者，如果你想定位nav元素，为什么不给它一个新的id，剩下的就是这样？

无法在nav标签内设置ul样式

2 个答案: