CSS horizontal drop-down navigation bar

by Yan Dave

HTML

<div id="nav">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="parent"><a href="#">Works</a>
        <ul class="child">
          <li><a href="#">Logos</a></li>
          <li><a href="#">Invites</a></li>
          <li><a href="#">Illustration</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS

#nav {
  color: #ffffff;
  background: #333;
  height: 50px;
  top: 0;
  left: 0;
  vertical-align: middle;
  font-family: Verdana, sans-serif;
}

nav {
  float: left;
}

nav ul {
  padding: 0;
  margin: 5px 0 0 0;
}

nav ul li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  padding: 15px;
  
}

nav ul li a:hover {
  color: #ffffff;
  background: #5a5a5a;
  text-decoration: none;
  padding: 15px;
}

nav ul li.parent ul.child {
    display: none; /* Hide Sub Menu */
    width: 150px;
}

nav ul li.parent:hover ul.child {
  display: block;
  position: absolute;
  top: 40px;
  background: #333;
}

nav.ul li.parent ul.child li {
  width: 150px;
}

nav ul li.parent ul.child li:hover {
  background: #5a5a5a;
	text-decoration: none;
  width: 150px;
}

nav ul li.parent ul.child li:hover a:hover {
  background: #5a5a5a;
	text-decoration: none;
  width: 150px;
  padding-top: 0px;
  padding-bottom: 0px;
}