添加懸停到當前導航欄

Question

我目前有一個HTML模板，我正在使用，並試圖在懸停菜單上添加一個下拉列表（沒有附帶模板）。我知道我必須改變CSS，HTML是正確的。

基本上我想讓用戶將鼠標懸停在「預告片」部分，並在其下面有3個子菜單項，他們可以選擇他們想要查看的預告片類型。

HTML代碼：

<nav> 
<div id="menubar"> 
    <ul id="nav"> 
     <li class="current"><a href="index.html">About Us</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="sales.html">Sales</a></li> 
     <li><a href="trailers.html">Trailers</a><ul> 
     <li><a href="#">Custom Trailers</a></li> 
     <li><a href="#">Customized Trailers</a></li> 
     <li><a href="#">Base Trailers</a></li> 
     </ul></li> 
     <li><a href="contact.html">Contact Us</a></li> 

    </ul> 
    </div><!--close menubar-->  
</nav> 

這裏是CSS：

#nav { 
margin: 0; 
padding: 0; 
} 

ul#nav 
{ margin:0;} 


ul#nav li 
{ padding: 0 0 0 0px; 
    list-style: none; 
    margin: 2px 0 0 0; 
    display: inline; 

    background: transparent; 
    } 

ul#nav li a 
{ float: left; 
    font: bold 120% Arial, Helvetica, sans-serif; 
    height: 24px; 
    margin: 10px 0 0 20px; 
    text-shadow: 1px 1px #000; 
    padding: 6px 20px 0 20px; 
    background: transparent; 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none;} 

ul#nav li.current a 
{ color: #000; 
    text-shadow: none;} 

ul#nav li:hover a 
{ color: #000; 
    text-shadow: none;} 

我已經試過的方法我已經在網上找到，但目前的「懸停」 CSS與我擰當我將其添加。我很迷茫，不知道從哪裏開始，或者從何處獲取其他網站的代碼。任何幫助，將不勝感激！我知道這可能是簡單的，我只是沒有看到，但它已經有一段時間，因爲我已經做了這種類型的CSS。

謝謝！

Answer 1

試試這個：

稍加修改HTML，所以你可以使用inline-block的用％的寬度爲您導航標題：

<nav> 
<div id="menubar"> 
    <ul id="nav"> 
     <li class="current"><a href="index.html">About Us</a></li><!-- 
     --><li><a href="services.html">Services</a></li><!-- 
     --><li><a href="sales.html">Sales</a></li><!-- 
     --><li class="dropdown"> 
      <a href="trailers.html">Trailers</a> 
      <ul> 
      <li><a href="#">Custom Trailers</a></li> 
      <li><a href="#">Customized Trailers</a></li> 
      <li><a href="#">Base Trailers</a></li> 
      </ul> 
     </li><!-- 
     --><li><a href="contact.html">Contact Us</a></li> 

    </ul> 
    </div><!--close menubar-->  
</nav> 

<div id="restofpage"> 

</div> 

而CSS：

#nav { 
    margin: 0; 
    padding: 0; 
} 

ul#nav { 
    margin:0; 
} 

ul#nav > li { 
    width:20%; 
} 

ul#nav li { 
    padding: 0 0 0 0px; 
    list-style: none; 
    margin: 2px 0 0 0; 
    display: inline-block; 
    vertical-align:top; 
    background: transparent; 
} 

ul#nav li a { 
    font: bold 120% Arial, Helvetica, sans-serif; 
    height: 24px; 
    text-shadow: 1px 1px #000; 
    padding: 6px 20px 0 20px; 
    background: transparent; 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
} 

ul#nav li.current a { 
    color: #000; 
    text-shadow: none; 
} 

ul#nav li:hover a { 
    color: #000; 
    text-shadow: none; 
} 

#nav ul { 
    display:none; 
} 

#nav li.dropdown:hover ul{ 
    display:block; 
    margin:0; 
    padding:0; 
    height:0; 
    overflow:visible; 
} 

#nav li.dropdown ul li{ 
    margin:0; 
    display:block; 
    word-wrap:none; 
    white-space:nowrap; 
} 

#restofpage{ 
    background:#369; 
    height:500px; 
    width:100%; 
} 

和提琴：http://jsfiddle.net/UUEx8/

這只是切換從「無」到「塊」的顯示，但是你可以使用一些花哨的CSS過渡（上不透明，變換，位置等），以獲得一些華而不實的效果。

沒有背景的下拉式風格！

Answer 2

你的問題不明確....添加CSS下拉菜單中看到這個 How to make a pure css based dropdown menu?