Javascript 将悬停添加到当前导航栏

我目前正在使用一个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对我产生了影响。我非常迷茫，不知道从哪里开始，或者当我从其他网站获得代码时，应该把什么放在哪里。任何帮助都将不胜感激！我知道这可能是一些简单的东西，我只是没有看到，但它已经有一段时间，因为我已经做了这种类型的CSS

---

谢谢

你的问题不清楚。。。。要添加CSS下拉菜单，请参见 试试这个：

稍微修改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 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转换（不透明度、变换、位置等）来获得一些平滑的效果

---

下拉列表中没有背景，请远离样式

我已经有一段时间没有做过这种类型的CSS了

对不起，你一直在做什么？也不清楚你想添加什么

：悬停

效果。基本CSS，这个新的CSS我没有接触过，我只想在它悬停时有一个下拉菜单。这样做有效，只需做一些调整，有没有办法在下拉列表中设置渐变背景？

<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>

#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%;
}