it's Complicated

Recently I used twitter bootstrap library and found that there are many new CSS3 elements used in it like gradient, transition etc. I thought to use them in my dropdown menus, I know these CSS3 effects doesn’t work properly in IE6, 7 and 8 but IE9 supports some features of CSS3 and I am sure IE10 will fully support CSS3. We will design the dropdown menu in a way so that it will render and display properly in IE6, 7 and 8, it will not support CSS3 features but will work in those browsers.

I tried not to use the JavaScript code in my menu, which makes it pure CSS/HTML based menu. Also there are no images in it; I achieved the gradient effect and other effects shown in menu using CSS3 properties.

HTML
We need following HTML for menu, you can change the menus according to your need.

<ul class="navbar">
 <li><a href="#">Dashboard</a></li>
 <li>
 <a href="#">Posts</a>
 <ul>
 <li><a href="#">All Posts</a></li>
 <li><a href="#">Add New</a></li>
 <li><a href="#">Categories</a></li>
 <li><a href="#">Tags</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Media</a>
 <ul>
 <li><a href="#">Library</a></li>
 <li><a href="#">Add New</a></li>
 </ul>
 </li>
 <li><a href="#">Links</a></li>
 <li><a href="#">Pages</a></li>
 <li><a href="#">Comments</a></li>
</ul>

CSS
We require following CSS to achieve those effects and dropdown menu function.

/* reset the navbar area */
 .navbar,
 .navbar ul,
 .navbar li,
 .navbar a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
 }

 /* navbar style */
 .navbar {
 height: 40px;

 background:#599F2F;
 background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);;
 background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));
 color:#FFFFFF;

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 }

 .navbar li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
 }

 /* style of links under navbar */
 .navbar li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;

 border-left: 1px solid #53962A;

 font-weight: bold;
 font-size: 13px;

 color: #fff;
 }

 .navbar li:first-child a { border-left: none; }
 .navbar li:last-child a{ border-right: none; }

 .navbar li:hover > a { color: #BDE8A2; }

 /* sub nav styles */
 .navbar ul {
 position: absolute;
 top: 40px;
 left: 0;

 opacity: 0;

 background:#599F2F;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
 }

 .navbar li:hover > ul { opacity: 1; }

 .navbar ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
 }

 .navbar li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
 }

 .navbar ul li a {
 width: 100px;
 padding: 4px 0 4px 14px;
 margin: 0;

 border: none;
 border-bottom: 1px solid #53962A;
 }

 .navbar ul li:last-child a { border: none; }

That’s it, we simply need HTML and CSS code to create dropdown menu bar. I have included all CSS and HTML code in one single file, you can see the DEMO HERE

This dropdown menu works fine in Firefox, Chrome and other modern browsers. It doesn’t work in IE6 but works fine in IE7 and 8 without CSS3 effects. In IE9 it supports some CSS3 effects.

If you have any problem in understanding the CSS or HTML code, you can ask it to me by adding your comment blow. I will try to sort out your problem. Thanks.