CSS Horizontal Navigation Menu

CSS code - horizontal navigation menu


/* 'defines width, font and position */
#nav {
  font-family: verdana, sans-serif; 
  position: relative; 
  width: 100%; 
  font-size:11px; 
  color:#FFF; 
  padding-top: 0px; 
}
/* 'defines list type */
#nav ul {
  list-style-type: none; 
  background-color: #000;
}
/* 'defines the drop-down container */
#nav ul li {
  float: left;  
  position: relative; 
  height: 18px;
}
/* defines text property of main menu links */
#nav ul li a {
  text-align: center; 
  border-right: 0px solid #e9e9e9; 
  padding: 2px 6px 2px 6px; 
  display:block; 
  text-decoration:none; 
  color:#FFF;
}
/* 'defines hover properties of main menu links */
#nav ul li a:hover {
  text-align: center; 
  border-right: 0px solid #e9e9e9; 
  padding: 1px 6px 3px 6px; 
  display:block; 
  text-decoration: none; 
  color:#F1ECAB; height: 15px; 
  background-color: #115498; 
  border-top: 1px solid #F8F8F8;
}
/* 'hides sub-menu */
#nav ul li ul { 
  display: none;
}
/* 'defines sub-menu ul properties */
#nav ul li:hover ul { 
  display: block;  
  position: absolute; 
  margin-top: 0px; 
  background: #F8F8F8;
}
/* 'defines sub-menu container properties on main menu link mouse-over */
#nav ul li:hover ul li a { 
  margin-left: -40px; 
  margin-top: -4px; 
  display:block; 
  height: 22px; 
  background: #F8F8F8; 
  color: #000; 
  width: 100px; 
  text-align: left; 
  border-bottom: 1px solid #DFDFDF; 
  border-left: 1px solid #DFDFDF; 
  border-right: 1px solid #DFDFDF;
}
/*'defines sub-menu hover bgr and link color */
#nav ul li:hover ul li a:hover { 
  margin-left: -40px; 
  height: 22px; 
  background: #F8F8F8; 
  color: #115498; 
  text-decoration: underline; 
  padding: -5px 0 10px 0; 
} 

HTML code

<div id="nav">
    <ul>
        <li class="first"><a href="#>Home</a></li>
        <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Location</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Partners</a></li>
        </ul>
        </li>
        <li><a href="#">Forms
        <ul>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Photos</a></li>
        </ul>
        </li>
        <li><a href="#">Information
        <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Prices</a></li>
        </ul>
        </li>
    </ul>