Adding Hover to current nav bar

Question

I currently have a HTML template i'm using and am trying to add a drop down on hover menu (Didn't come with the template). I know i have to change the CSS, the HTML is correct.

Basically i want to have the user hover over the "trailers" part and have 3 sub menu items under it where they can select what kind of trailer they want to look at.

HTML Code:

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

Here is the 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;}

I have tried methods i have found online, but the current "hover" css is screwing with me when i add it. I'm very lost and not sure where to start or where to put what when i get the code from other sites. Any help would be appreciated! I know this is probably something simple that I am just not seeing, but its been a while since i've done this type of CSS.

Thanks!

Answer 1

Try this one:

Slightly modified HTML so you can use inline-block with % width for your nav headings:

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

And the 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%;
}

And the fiddle: http://jsfiddle.net/UUEx8/

This simply switches display from "none" to "block", but you could use some fancy css transitions (on opacity, transform, position, etc.) to get some slick effects.

No background on the dropdown, style away!

Answer 2

您的问题不清楚。...要添加CSS下拉菜单，请参阅此如何制作基于CSS的纯下拉菜单？