将鼠标悬停添加到当前导航栏

Adding Hover to current nav bar

本文关键字：导航 鼠标 悬停 添加      更新时间：2023-09-26

我目前有一个我正在使用的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;}

我已经尝试了我在网上找到的方法，但是当我添加它时，当前的"hover"css正在与我纠缠。我很失落，不知道从哪里开始或在哪里放什么，当我得到其他网站的代码。任何帮助将不胜感激!我知道这可能是我没有看到的简单的东西，但是我已经有一段时间没有做过这种类型的CSS了。

谢谢!

试试这个:

稍微修改了HTML，这样你就可以在你的导航标题中使用带有% width的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/

这只是将显示从"none"切换到"block"，但你可以使用一些花哨的css过渡(不透明度，变换，位置等)来获得一些光滑的效果。

下拉菜单没有背景，样式删除!

你的问题不清楚....要添加CSS下拉菜单，请参见此如何使一个纯css为基础的下拉菜单?

相关文章：