Ali Jafarian

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 png image for our transparent menu background.

#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: url(images/trans_green-70.png);
  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!


  • jingo bd

    Cool. :D

  • yemliha81

    Thanks a lot!

  • Navid Sedehi

    Toe ie 10 kar nemikone asan zir menu baz nemishe

  • Alejandro

    try this in internet explorer just for fun :D

    • 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 :)

  • so nice!.. tnks.

  • zaved khan

    Thankss Sir ……wonderfulll idea i have learn unique technique.thanks a lot

  • Sara Sheehan

    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!

  • Musah Shaibu

    Thanks a lot.
    Good work.

  • Photo 478

    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

  • alex

    Good

  • Rev. Edward Salm, PhD

    How do you remove the top and side border?

  • LambdaEnt

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

  • fernando

    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?

  • Profmiles

    it is not working….

    • @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 :)

      • Profmiles

        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.