帶下拉菜單的流體導航欄

我正在嘗試爲響應式網站製作導航菜單。我來到了一個點，我有我的主菜單流體，但不知道如何從它下拉菜單。這裏是我的html代碼：帶下拉菜單的流體導航欄

<body> 
<div id="nav"> 
<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul> 
    <li><a href="">Clothes</a></li> 
    <li><a href="">Recipe</a></li> 
    <li><a href="">Contact</a></li> 
</ul> 
</div><!-- ends nav --> 

</body>

這裏是我的CSS：

#nav { 
display: table; 
table-layout: fixed; 
width: 100%; 
} 

#nav ul { 
display: table-row; 
margin: 0; 
padding: 0; 
} 

#nav ul li { 
list-style: none; 
display: table-cell; 
text-align: center;

}

#nav ul li a { 
display: block; 
}

我嘗試添加幾行代碼，以我的CSS，但沒有工作，以及：

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

請幫幫我。

感謝

來源

2014-12-06 almondn

您是否使用Bootstrap框架？ – VSri58 2014-12-06 07:40:30

你的下拉菜單是哪個？它從哪裏開始？ – Akshay 2014-12-06 08:06:53

的問題列表結構是不正確

<li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul>

應該

<li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul> 
    </li>

子<ul>被包裹在父<li>節點。

二，添加下面的代碼，使之下拉：

#nav li {position:relative;} 
#nav li ul{display:none;position:absolute;left:0;top:100%;}

然後加入更多的CSS代碼，使其美觀。

來源

2014-12-07 15:04:53

帶下拉菜單的流體導航欄

回答

相關問題