Incredible Drop Down Menu Solution With CSS Only

written by aext on December 6, 2009 in CSS & HTML with 78 comments

There are plenty of drop-down menus using javascript and CSS already available, but most of them are either too basic (with CSS) or too complicated (with Javascript). That’s why I publish this drop down menu solution which is using CSS only, but it has a smooth drop effect and the css sprites that changes the toggle icon jQuery-likely. Honestly, this is the most completed menu solution using CSS which comes along with awesome effects.

If You want to stay updated and get news regularly consider subscribing to AEXT.NET feed and following on Twitter.

This menu solution is compatible with all major web browsers (excepts IE6):

• Firefox: Perfect support.
• Chrome: Perfect support.
• Safari: Yes, it display perfect with rounded corner.
• Opera: Yes, but with no rounded corner.
• IE7+: Off course, but no rounded corner

The problem with IE6 is she cannot handle the hover event in all HTML element excepts the link:hover. If you don’t want to waste time for saving this lady, just forget her. However, there a solution to help this lady to displays the menu correctly: using whatever:hover script. (I’m sorry but I don’t recommend to support IE6)

It also has a transparent effect that displays correctly on all web browsers, take a look:

Now, it’s time for you to check the demo or download it:

Step 1: Prepare the HTML code.

The HTML code is very simple. You just need a list of links. If it has a sub-menu, it should have another list inside. Your HTML code should be like this below: (See the comment to understand clearly how the menu works)

    <ul class="menu">

      <!-- Begin Simple Item Without Drop -->
      <li class="">
        <a href="#">Interested in Contribution?</a>
      </li>
      <!-- End Simple Item Without Drop -->

      <!-- Begin Item With Drop -->
      <li class="drop">
        <a href="#">Web Design</a>

        <!-- Begin Toggle Icon -->
        <span class="toggle">&nbsp;</span>
        <!-- End Toggle Icon -->

        <ul>
          <li><a href="#">CSS & XHTML</a></li>
          <li><a href="#">Javascript</a></li>
          <li><a href="#">Photoshop</a></li>
          <li><a href="#">Illustrator</a></li>
          <li><a href="#">Dreamweaver</a></li>
        </ul>
      </li>
      <!-- End Item With Drop -->

      <li class="drop">
        <a href="#">Blogging</a>
        <span class="toggle">&nbsp;</span>
        <ul>
          <li><a href="#">Tricks & Tips</a></li>
          <li><a href="#">Affiliate</a></li>
          <li><a href="#">Advert on aext.net</a></li>
        </ul>
      </li>
    </ul>

If you wanted to get opacity to work with IE8, either you’d have to have your users turn on the IE7 compatibility mode, or you’d have to add a meta tag to your web page:

<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />

Step 2: Prepare CSS Sprites image for toggle icon.

If you want to use the toggle icon for the menu item when it is active, you should use the CSS Sprites technique to do it. In Photoshop or any image editor, make an image for sprites like this:

You can use the top image for active items, and the bottom for inactive items.

[smartads]

Step 3: Write CSS code.

First, we have to make up the root menu ul element.

ul.menu {
    list-style-type:none;
    margin:0;
    padding:6px 0 0 6px;
    position:relative;
    float: right;
}

Next, for the list of items, we should write CSS code like this below:

ul.menu li {
    display:block;
    height: 30px;
    float:left;
    position:relative;
    margin:0 9px 0 0;
    padding:0;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}
ul.menu li.current {
    background:#000000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li:hover {
    background:#000000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

Remember we only set background color for the item when it is hover or active, because we don’t need to display the background color when it is inactive.

CSS code below is used for styling the toggle icon:

ul.menu li.drop span.toggle {
    display:block;
    float:left;
    width:21px;
    height:26px;
    background:transparent url("images/toggle.png") no-repeat 0 -20px;
    padding:0;
    margin:0 7px 0 0;
}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle {
    background-position:1px 5px;
}

When the item was in mouse over, we will make some changes to the current active item, also display the sub-menu list. The sub-menu is a list of items which placed as absolute position, so it has to be set z-index value larger than others. We handle the hover event by using css as below:

ul.menu li.drop:hover, ul.menu li.current:hover {
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
}
ul.menu li.drop:hover ul {
    display:block;
    z-index:1;
    padding-bottom:8px;
}

Because IE has problem when displays the opacity effect with css, we need to set the opacity again in the sub-menu and its items. The most important css code to display the sub-menu is:

ul.menu li ul {
    display:none;
    position:absolute;
    width: 100%;
    top:30px;
    left:0;
    list-style-type:none;
    margin:0;
    padding:9px 0 0 0;
    background:#000000;
    filter: alpha(opacity=75); /* internet explorer */
}
ul.menu li ul li {
    float:none;
    height: auto;
    margin:0;
    padding:0;
    border:none;
    filter: alpha(opacity=100); /* internet explorer */
}

These CSS code above is only for most important parts of the menu to see how the menu works in basic and it’s unnecessary to post a whole code here. The completed code is include in download file. Download it and customize some value to fit your needs.

The Bugs:

Because it uses CSS only to render the dropdown menu, it still has some unexpected bugs:

• As I said on top: This menu is not used for IE6 (If you want, please do some IE6 hacks)
• Currently, this menu cannot render a rounded corner in IE, Opera
• When the number of characters of the root item is less than sub-menu items, this menu cannot automatically stretch the width. See the demo, look at the third one
• This menu currently works with one or two tiers only.

Please let me know if you decide to use it, or have any feedback. Thanks!

tags: CSS & XHTML CSS tutorial drop down effect dropdown elegant drop menu menu drop down

---

Related Articles