2015-09-16 57 views
1

我想使用CSS做一個下拉菜單,但它不工作。誰能告訴我爲什麼?我嘗試了幾種不同的方式,它不想下拉菜單。有人能告訴我爲什麼這不起作用嗎? Css下拉菜單

<nav id="primary_nav_wrap"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li class="current-menu-item"><a href="index.html">Home</a></li> 
 
\t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t <li><a href="#">Blog</a></li> 
 
\t \t \t \t <li id="performDrop"><a href="#">The Performer</a></li> 
 
\t \t \t \t \t <ul id="perform"> 
 
\t \t \t \t \t \t <li class="subList"><a href="#">Resume</a></li> 
 
\t \t \t \t \t \t <li class="subList"><a href="#">Photos</a></li> 
 
\t \t \t \t \t \t <li class="subList"><a href="#">Videos</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t <li id="drinkDrop"><a href="#">The Drink-Smith</a></li> 
 
\t \t \t \t \t <ul id="drinks"> 
 
\t \t \t \t \t \t <li class="subList"><a href="#">Wine of the Week</a></li> 
 
\t \t \t \t \t \t <li class="subList"><a href="#">Videos</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t </ul> 
 
\t \t </nav>

,這裏是這似乎是問題的所在

#primary_nav_wrap 
 
{ 
 
\t margin:0; 
 
\t text-align: left; 
 
\t width:600px; 
 
\t float:right; 
 
\t padding: 35px 20px 20px 0; 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:right; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
\t background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

感謝您可以提供任何幫助的CSS!

+0

您需要使用JavaScript/jQuery切換下拉菜單。純粹的CSS也是可能的,但你需要使用轉換。 –

+0

如果您甚至不努力正確縮進代碼並使其可讀性如何,您如何希望別人付出努力? – connexo

+0

除此之外,'ul'中唯一允許的直接後代元素是'li'。 – connexo

回答

2

你只需要嵌套你ul的relavent li內:

<li id="performDrop"><a href="#">The Performer</a> 
    <ul id="perform"> 
     <li class="subList"><a href="#">Resume</a> 
     </li> 
     <li class="subList"><a href="#">Photos</a> 
     </li> 
     <li class="subList"><a href="#">Videos</a> 
     </li> 
    </ul> 
</li> 

這是你的工作提琴:http://jsfiddle.net/o4254bav/1/

我所做的唯一的變化是移動的結束標記爲您列表項</li>附上您的<ul>標籤。

相關問題