无法在导航标记中设置ul的样式

我想为我的网站制作导航菜单，并且已使用http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ 作为指南。它工作正常，但只要我尝试添加（id =“coolMenu”）到导航标签停止工作。无法在导航标记中设置ul的样式

我把它从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; 
}

来源

2012-11-17 user1831677

的问题是在这里：

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

既然你把ID的nav元素，主要ul设置为display: none，而不是子菜单ul s。如果你想在nav上拥有这个ID，你将不得不改变所有的CSS选择器来反映这一点。

或者，如果您想要定位nav元素，为什么不给它一个新的ID并保持原样？

来源

2012-11-17 13:51:58

感谢您的回复。我确实希望在导航上有id，所以我在css中添加了nav。即。 #coolMenu nav ul的一切，但它不工作，因为indended。它从一个垂直的菜单变成了一个垂直的菜单，所有的颜色都改变了。我做错了什么？ – user1831677

现在你选择它的方式，选择器将查找导航元素_inside_ id为#coolMenu的元素。在您提供的原始CSS中，使用'#coolMenu ul'或'nav＃coolMenu ul'替换每个'＃coolMenu'，以澄清属于nav的id。这应该够了吧。 –

非常感谢Tobi。 – user1831677

你的问题是在这里：

<nav id="coolMenu"> 
<ul>

的ID标记，应该连接到无序列表，它应该是

<nav> 
<ul id="coolMenu">

看看这里你的代码编辑：http://jsfiddle.net/UMTGR/1/

来源

2012-11-17 10:56:54

OP已经说过，在他的问题中：_“我把它从'ul'标签中拿走，并将它添加到'nav'标签，它不再起作用。”_〜解释为什么？ – Sparky

无法在导航标记中设置ul的样式

回答

相关问题