CSS - 下拉菜單

我是新來的CSS和測試一些東西。我創建了一個下拉菜單，但這不能正常工作。這裏是我的代碼：CSS - 下拉菜單

<!DOCTYPE html> 
<html> 

<head> 
    <link href = "üben_css.css" rel = "stylesheet" type="text/css"> 
    <title> xx</title> 
</head> 

<body> 


<div id="nav"> 
    <ul> 
     <li> Home  </li> 
     <li> xx 
      <ul> 
       <li> Hc </li> 
       <li> Scc </li> 
      </ul> 
     <li>Zubehör  </li> 
     <li> Service </li> 
     <li> Forum </li> 

    </ul> 
</div> 



</body> 

</html>

CSS代碼：

body{ 
margin:0; 
padding:0; 
} 

#nav{ 
background-color:silver; 
position:relative; 
} 

#nav ul li{ 

display:inline; 
} 

#nav ul ul{ 
display:none; 
} 

#nav ul li:hover ul{ 
display:block; 
} 

#nav ul ul li{ 
display:block; 
}

的問題是，在導航欄的內嵌顯示，但是當我在我的導航欄的其餘部分將鼠標懸停在我的「XX」元素出現在我的下拉列表中。我怎樣才能解決這個問題？

http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png

來源

2014-09-21 happyxx89

使用

#nav ul li{ 
    display:inline-block; 
}

比例僅爲inline。如果僅僅是inlineabsolute定位在下面會導致多個下拉菜單根據#nav div顯示在同一位置。

#nav ul li:hover ul{ 
    position: absolute; 
    display:block; 
}

這仍然看起來不太好，但它的功能。在tutsplus檢查一些很好的教程。

與此同時，我相信你可以用jQuery更高效地解決這個問題。

來源

2014-09-21 00:30:01 rwxes

謝謝你的鏈接！ – happyxx89 2014-09-21 09:04:25

從你的CSS刪除這些行：

#nav ul li:hover ul{ 
display:block; 
}

來源

2014-09-21 00:15:09

CSS - 下拉菜單

回答

相關問題