在ul中使用ul與樣式表衝突

Question

唯一的問題是，當我懸停「Section」鏈接時，列表將作爲內嵌顯示。我希望它成爲一個列表，我的意思是每個鏈接下的其他鏈接。只有部分的名單。我試過這個樣式表，但它不適合。

這是我的HTML

<div class="nav"> 
    <ul class="navbar" > 
    <li><a href="Home.aspx">Home</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Sections</a> 
     <ul class="SectionList"> 
      <li><a href="#">haha</a></li> 
      <li><a href="#">haha</a></li> 
      <li><a href="#">haha</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Appointment</a></li> 
    <li><a href="Registeration.aspx">Registration</a></li> 
    </ul> 
</div> 

，這是我的樣式表

ul.navbar 
{ 
    list-style-type:none; 
    padding:6px 0 6px 0; 
    margin:0; 
} 

ul.navbar li 
{ 
    display:inline; 
    float:left; 
} 

.SectionList 
{ 
    display:none; 
    padding: 0; 
    margin: 0; 
} 

ul.SectionList li 
{ 
    padding:0; 
    margin:0; 
} 

.navbar li:hover .SectionList 
{ 
    display:block; 
} 

Answer 1

見搗鼓你想要的輸出，你需要在它的外觀做工和手感。 http://jsfiddle.net/PthNP/與螢火蟲

ul.navbar 
{ 
list-style-type:none; 
padding:6px 0 6px 0; 
margin:0; 

} 

ul.navbar li 
{ 
display:inline; 
float:left; 
} 

.SectionList 
{ 
display:none; 
padding: 0; 
margin: 0; 
} 

ul.SectionList li 
{ 
padding:0; 
margin:0; 
} 

.navbar li:hover .SectionList 
{ 
display:block; 
    width:50px; 

} 

.SectionList li 
{ 
    width:100px; 
    display:block; 
} 

Answer 2

檢驗表明這一點：

ul.navbar li 
{ 
    display:inline; 
    float:left; 
} 

正在申請

display:inline 

給所有後代。要修復，請將其更改爲：

ul.navbar > li 
{ 
    display:inline; 
    float:left; 
} 

這將只選擇第一個後代。 Here是一個CSS參考。

你也可以從GRC pure CSS menus得到一些好主意，所以你不必完全重新發明輪子。祝你好運。