添加悬停到当前导航栏

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?