CSS Transparent Drop Down Menu

Today we’re going to build a transparent drop down menu using CSS and HTML. Drop down menus are very popular for websites with deeper navigation. They improve usability by allowing users to access all the main pages from anywhere on the site. That said, let’s get to it!

The HTML

First, we’re going to code a standard unordered list (<ul>) inside of a “main-nav” div. I’ve found it useful in my own work to always code my HTML first and then go back and apply styling (CSS). You will also see the use of <span> tags inside the main drop down links (<a> tags). This may seem like unnecessary code, but it allow for more control and less CSS than if we used background images on the <a> tags themselves.

<div id="main-nav">
  <ul>
    <li><a>Home</a></li>
    <li><a>About<span class="drop-down"></span></a>
      <ul>
        <li><a>Island Info</a></li>
        <li><a>Native Culture</a></li>
        <li><a>Wildlife</a></li>
      </ul>
    </li>
    <li><a>Activities<span class="drop-down"></span></a>
      <ul>
        <li><a>Fishing</a></li>
        <li><a>Scuba Diving</a></li>
        <li><a>Snorkeling</a></li>
        <li><a>Water Skiing</a></li>
        <li><a>Zip Lining</a></li>
      </ul>
    </li>
    <li><a>Contact Us<span class="drop-down"></span></a>
      <ul>
        <li><a>Map & Directions</a></li>
        <li><a>Schedule a Tour</a></li>
      </ul>
    </li>
    <li><a>News</a></li>
  </ul>
</div>

The CSS

Our CSS is pretty straightforward. We’ll hide the second level <ul>’s by default so they don’t show, and then reveal them on hover of their parent <li>. We’ll also use CSS3 gradients for the navigation background instead of an image. Lastly, we’ll use a rgba property for our transparent menu background. Using rgba() properties allows you to specify an opacity value as the 4th declaration (i.e. rgba(0, 0, 0, .75).

#main-nav {
  background: #7dad16;
  background: -moz-linear-gradient(top, #7dad16 0%, #547b00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dad16), color-stop(100%,#547b00));
  background: -webkit-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -o-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -ms-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: linear-gradient(top, #7dad16 0%,#547b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dad16', endColorstr='#547b00',GradientType=0 );
  float: left;
  width: 900px;
  z-index: 1000;
}
#main-nav ul {
  font-family: 'Droid Sans', sans-serif;
  font-size: .9em;
  font-weight: bold;
  list-style: none;
}
#main-nav ul li {
  border-left: 1px solid #7dad16;
  float: left;
}
#main-nav ul li:first-child {
  border: none;
}
#main-nav ul li a {
  color: #2b4001;
  display: block;
  padding: 20px;
  position: relative;
  width: 139px;
  text-decoration: none;
  text-shadow: 0 1px 1px #9fc255;
}
#main-nav ul li a span.drop-down {
  background: url(images/down-arrow_green_10x7.png) no-repeat;
  height: 7px;
  position: absolute;
  right: 20px;
  top: 24px;
  width: 10px;
}
#main-nav ul li:hover {
  background: #7dad16;
}
#main-nav ul li ul {
  display: none;
}
#main-nav ul li:hover ul {
  background: rgba(0, 0, 0, .75);
  display: block;
  font-size: .9em;
  font-weight: normal;
  padding: 10px;
  position: absolute;
}
#main-nav ul li ul li {
  float: none;
  display: block;
  border-left: none;
  position: relative;
}
#main-nav ul li ul li a {
  width: 170px;
  padding: 15px 10px;
  border-top: dotted 1px #7dad16;
  color: #fff;
}

Summary

And that’s it, a transparent HTML drop down menu using CSS. This is just one of several ways to build an HTML drop down menu. There are plenty of other great solutions out there, many of which use JavaScript for enhanced functionality. This specific example focuses on pure CSS and will work in all major browsers. Hope you find it useful!