無法在導航標記中設置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的樣式

回答

相關問題