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!

Discussion

17 thoughts on “CSS Transparent Drop Down Menu”
    1. Alejandro, I assume you’re referring to IE7. Yes, it looks like shit in that browser. I choose not to support IE versions < IE8 on my website. If you work for a company that supports IE7 [or below] you have my condolences 🙂

  1. Thanks, this was perfect for a CSS beginner. I really like the effect. I modified the colors, and added opacity to the top level menu bar so that it can sit over a full-screen background image. It turned out great. Awesome tutorial!

  2. Thank you so much for this menu design. I was wondering if you could help me figure out how to make the size of the menu buttons responsive to the title length? For example, I have one title that is 5 letters and one that is 25 letters. I would like the button size to vary depending on the title length, instead of having just one standard size across all. I’ve been working on the CSS, but can’t seem to figure it out. Any help is much appreciated! Thank you. B

  3. I’ve been at it for an hour. A simple guide to setting the font, background, and other colors would be helpful…PLEASE!
    (Adding comments in the CSS code, maybe?)

  4. jsliderman put a gallery but this is superimposed on the list and not allowed to see the rest and try and remedy it but I can not make this gallery is transparent , could help me?

    1. @Profmiles:disqus it does in fact work. Do not post such ignorant comments in this thread… obviously other people below have used this with success. Double-check your code and figure out what’s wrong. That’s what a good developer would do 🙂

      1. I’m not sure what this is, but I assume my son, who is learning to program, wrote this comment while I was logged on our computer.
        If so, he’s only 10-years old and is just learning to program. I can see that his comment doesn’t give you much to go on, but still, I would appreciate it if you could tone down the insults.

Leave a Comment

Your email address will not be published. Required fields are marked *


Ali Jafarian

Skill Level newbie
Tutorial Category UI Design
Comments 17 comments

Did you find value here?

If yes, please jump on my email list for more free stuff. I'll keep bringing the heat.

Get on the List