Pure CSS3 Multi Level Drop Down Navigation Menu

We are back with a cool Multi-level Drop Down Navigation Menu made up of pure CSS with additional effects using CSS3.0 properties such as border-radius, box-shadow, text-shadow and linear gradient. This navigation menu renders perfectly on Firefox, Chrome and also Safari.

HTML

Here is the basic HTML code for this multi-level navigation menu.

<div id="nav"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Our Portfolio</a></li> 
<li><a href="#">One Dropdown</a> 
	<ul> 
	<li><a href="#">Level 2.1</a></li> 
	<li><a href="#">Level 2.2</a></li> 
	<li><a href="#">Level 2.3</a></li> 
	<li><a href="#">Level 2.4</a></li> 
	<li><a href="#">Level 2.5</a></li> 
	</ul> 
</li> 
<li><a href="#">Three Levels</a> 
	<ul> 
	<li><a href="#">Level 2.1</a></li> 
	<li><a href="#">Level 2.2</a></li> 
	<li><a href="#">Level 2.3</a> 
		<ul> 
		<li><a href="#">Level 2.3.1</a></li> 
		<li><a href="#">Level 2.3.2</a></li> 
		<li><a href="#">Level 2.3.3</a></li> 
		<li><a href="#">Level 2.3.4</a></li> 
		<li><a href="#">Level 2.3.5</a></li> 
		<li><a href="#">Level 2.3.6</a></li> 
		<li><a href="#">Level 2.3.7</a></li> 
		</ul> 
	</li> 
	<li><a href="#">Level 2.4</a></li> 
	<li><a href="#">Level 2.5</a></li> 
	</ul> 
</li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</div> 

You would see a skeleton of links without any styles added to that HTML code like shown in the image below.

CSS

Now we’ll start to give the skin to that skeleton of links (stylize) with CSS. Here is the basic CSS code for the menu.

#nav {
    	float: left;
   	font: bold 12px Arial, Helvetica, Sans-serif;
    	border: 1px solid #121314;
    	border-top: 1px solid #2b2e30;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	overflow: hidden;
}

#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

#nav ul li {
	float:left;
}

#nav ul li a {
   	float: left;
	color:#d4d4d4;
    	padding: 10px 20px;
	text-decoration:none;
    	background:#3C4042;
 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav li ul {
    	background:#3C4042;
    	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    	background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	border-radius: 0 0 10px 10px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 35px 0 0;
    	position: absolute;
    	width: 160px;
    	z-index: 9999;
    	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
    	background: none;
    	border: 0 none;
    	margin-right: 0;
    	width: 120px;
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
}

Once you’ve added that code, you’ll see a stylized navigation menu without dropdowns and hover effects as shown in the image below.

Add the following css code to make the drop down and submenus visible and also for the hover effects.

#nav ul li a:hover,
#nav ul li:hover > a {
    	color: #252525;
    	background:#3C4042;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
	background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
	background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #2c2c2c;
  	background: #5C9ACD;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
	background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
	background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    	border-bottom: 1px solid rgba(0,0,0,0.6);
    	border-top: 1px solid #7BAED9;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#nav li:hover ul {
    	left: auto;
}


#nav li li ul {
    	margin: -1px 0 0 160px;
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
}

#nav li li:hover ul {
    	visibility:visible;
}

So, it will look like this after you added the code shown above. However, corners of the first and last menu links of the submenus won’t look curved till you add the next piece of CSS code.

#nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
}

So now, the first and last submenu links will have rounded borders as shown in the image.

And that’s all. You may want to look at the live demo of the Navigation menu or download the resource files. Please don’t forget to share your views and opinions about this Navigation menu tutorial!

June 13, 2011. This entry was posted in CSS, Design, Tutorials and tagged , , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

65 Responses so far!

  1. nice!!!
    But how to use it in blogger?
    Please explain in detail…

  2. Hmm… any idea why the demo I see is broken so the last button Contact is placed at the start of row 2. It looks like that in both Safari and Firefox.

  3. I LOVE doing menus like this. The CSS makes it really easy to design (and redesign), and the lists keep it really well organized. Thanks for posting your example – I use a slightly different way of selecting my anchors hierarchically, so I might give your method a shot sometime to see what, if any, differences there are.

  4. got it bro; THANX,
    ur blog really rox

  5. In my case the navigation menu isnt centred. Any ideas on how to center it?

  6. Any idea how to get this working in IE?

    The code and structure look great, so I’m not sure why it isn’t rendering the sub-menus. Nice work indeed, but would be much more practical if it were compatible with all browsers, especially the most common one.

    Cheers,
    ~CD

    • Hi Chaz
      This menu uses pseudo selectors so unfortunately will not work as it is on IE6/7. These really old browsers need hovers to be placed on an anchor rather than a surrounding block that is why the drop downs do not work. You could play around and get a display: block on the hovers for IE6/7 but personally I would not worry about it.

      It also works on IE8/9 perfectly and even on less popular browsers such as Camino where you will get the rounded corners but not the gradients.

      Design for the best browsers first then work backwards!

  7. wow nice menu but i dont know how to add in blogger or blogspot
    plz explain my dear frends

  8. Hello,

    I’m trying to instal this menu into my forum, I’ve entered everything in its place, css code in css, and html in a page i’ve created but it won’t appear on the page, anyone know if i must put something on the Homepage Message?

    • @Pova Hi there. you will need to tell your forums page to look for the css file.
      <link rel=”stylesheet” href=”/css/layout.css”&rt;
      ie
      where href=”/css/styles.css?v=1.0″ is your css file
      The first / tells the browser to go to the document root. so if your ftp layout is:
      htdocs— (document root)
      css(folder)
      index.html (html file)
      Forums (folder)
      —–
      css folder—
      layout.css (cascading style sheet file)
      Forums folder—
      index.html

      index.html—
      <link rel=”stylesheet” href=”/css/layout.css”&rt;
      this will work from any page on your site.

      If you are doing from your pc you would need to use ../ to go up each directory.

      hope this helps ;-)

  9. Nice one. Keep up the good work :)

  10. how do you remove the border , the black one :]

  11. People who want to add this in Blogger. Just Copy everything in a note pad. and paste it before ]]>
    in html area of your blog.
    I hope that will help.

  12. Good thinking indeed :) Thanks for sharing!

  13. how do I make it work in IE?

  14. how to make it work on explorer?

  15. nice menu, but it doesn´t work fine on IE! any solution?

  16. Awesome tutorial…..

  17. alas double margin bug in ie7

  18. very nice

  19. I’m trying to get it going but all I see is the skeleton view. Anyone have any ideas on whats missing? Check my link above for online view.

  20. Got it working. Problems attaching stylesheet. Thanks

  21. Howz it going, So looking at the code you have set up in the CSS and for some reason I am having a hard time understanding what the last two selectors are for in the .css?
    #nav ul ul li:last-child > a {
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
    }

    #nav ul ul ul li:first-child > a {
    -moz-border-radius:0 10px 0 0;
    -webkit-border-radius:0 10px 0 0;
    border-radius:0 10px 0 0;
    }

  22. It’s cool on firefox. best I ever found in Internet.Thank you for sharing. But unfortunately the dropdown menu doesn’t drop down when I testing IE8. Please take a look here http://www.sg-dvr.blogspot.com. Do help!

  23. If your menu has more than 3 levels (Top -> Descending -> Right -> Right), levels 3 and 4 may show at the same time (though the 4th one should be displayed only on 3rd:hover).

    This can be fixed by replacing this :
    #ArborescenceWD li li > ul
    by this :
    #ArborescenceWD li li > ul li > ul,
    #ArborescenceWD li li > ul

    And this :
    #ArborescenceWD li li:hover > ul
    By this :
    #ArborescenceWD li li > ul li:hover > ul,
    #ArborescenceWD li li:hover > ul

    Thanks a lot for this menu ! It helps me much ! :)

    • Exactly what I was looking for, except I don’t quite understand your code.
      Would it be possible for you to use the original code please? I do not recognize the one you used. Thanks!

  24. I was just wondering if you could put this on a posterous website. If you can, may you give me a step by step way of doing so?

  25. How do you get this to stretch the width of the screen? I inserted:
    #nav {
    width: 100%
    }

    but this does not work in either Opera, Firefox or IE.

    Other than that, this guide is excellent. Thanks.

  26. This is a great tutorial. I was struggling for ages on my site to replace the nav bar that Serif web plus x5 generated. Now I will be able to replace this with css and html and scrap web plus’ java script nav bar. (I was making a mistake where I had put this code in home
    services

    ........ instead of services remote assistance......

    Infact I can now re-code my site from scratch thanks to your tutorial :-)

  27. man, you’re rock!

    I trully love your carbon 12 template, it looks so coll and fast-loading
    how about activate the dropdown menu in those template?

    thanks before, sorry for my bad english

  28. Hi,
    Great tutorial. I was wondering if this css menu can be used as a base to develop a commercial site?
    Thanks,
    Goltus

  29. Hi great tutorial

    Can i ask you something how can i change the color

    Three Levels “Choose a color as font color”

    Level 2.1 “Choose different color as font color”
    Level 2.2
    Level 2.3

    Level 2.3.1” Choose differnet color as font color
    Level 2.3.2
    Level 2.3.3
    Level 2.3.4
    Level 2.3.5
    Level 2.3.6
    Level 2.3.7

    Thaks in advanced

  30. ARGH! 60 minutes of debugging and editing to get the menus to work on my site and then when it’s all done and working (text would not carriage return that appeared following the closing DIV tag) I go to login the site and it fails. I test the code and the login passwords are corrupt (first letter was wrong, couple of letters too short). Removed the code for the dropdown and the login worked. For some reason it didn’t like the form results.

  31. What if a submenu only has 1 item? Then should it get first and last class, now the corners aren’t on the right place.

  32. Hi, How can I change the size of the buttons etc. I don’t see a height tag in there. I am trying to add a search bar at the end of the menu and want it to span the whole width of my page. Currently I am getting grey till the end of my buttons and search bar and then a black space with rounded corners. Many thanks for the tutorial its great.

  33. Doesn’t work on IE8 , wasted my time on novice programmers. If you can’t write code that works across all browsers what is the point of that ! It is pointless. More people are using IE then Firefox, don’t know why, but they are.

    • This is a great tutorial to get you started. If this menu doesn’t suit your full needs well then go ahead and write your own css styled menu instead of complaining!

  34. Hello

    Love this menu

    I was just wondering how do I change the black or dark grey to a different colour on the main nav part where its got Home and About Us etc

  35. This is a fantastic tutorial. Very easy to follow. The only thing I would change about it: IE doesn’t support most css3 code yet, like the gradient backgrounds and rounded corners… so I would make notes of what IE doesn’t support and back up methods to use (example: where the gradients won’t work, let people know that they can use an image for a gradient or a solid fall back color). But it was definitely a good tutorial.

  36. how to add 2.3.1.1 level

  37. Hi!

    I download the demo, looks nice. good work!

    I noticed when I minimize the window (small) the menu buttons go down, top of each other. how can I fix it?

  38. Is there a way to make it work for IE7 ?

    • I needed to make a few altererations to get it working in ie7:
      #nav {width:996px; margin:0 auto; height:25px; clear:both;}
      #nav ul {margin:0; padding:0; list-style:none;}
      #nav ul li {float:left; margin-right:3px}
      #nav ul li a {float: left; color:#b2757d; padding:4px 10px; text-decoration:none; background:#f7f7f7; height:17px;
      background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
      background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#f7f7f7′);}
      #nav li ul {background:url(../images/drop.png) repeat; left:-999em; margin:24px 0 0 0; position:absolute; width:160px; z-index: 9999;}
      #nav li ul a {background:#fcfcfc; border:none; margin:4px; width:132px;}
      #nav ul li a:hover, #nav ul li:hover > a {color:#333; background:#fff;}
      #nav li ul a:hover, #nav ul li li:hover > a {color:#333; background:#fff;}
      #nav li:hover ul {left:auto; display:block; clear:both; *margin-top:0px}
      #nav li li { position: relative; }
      #nav li li ul {margin:0 0 0 160px; position:absolute;top:0px;left:160px; visibility:hidden;}
      #nav li li:hover ul {visibility:visible;}

  39. Hi,

    In order to make it work on IE 7 just add display:block in this
    #nav li:hover ul {
    display:block;
    left:auto;}
    and tweak by applying *margin in this for IE7
    #nav li ul{}

  40. Yes It is working i7 now

  41. Excellent. Thanks. Saved me a lot of work!

  42. Very nice menu. Thanks for tutorial.

  43. After all executing ur code am not able to see three levels,i can only see one drop down menu.please check my blog and rectify it,Thank you.

  44. Great menu, but this newbie can’t get it to work. I use iWeb so after modifying the html code to my links, I put the html code in a HTML Snippet and downloaded the stylesheet.css file to the root of the server. All I get is a list of the tabs, Home, About, etc. Please tell me what I’m doing incorrectly or what else I need to do.

    Thank you so much,
    Hozey

  45. OK, I got it to work; moved the stylesheet.css file to the folder for each page. Just one question, which has been asked by someone before, but I didn’t see an answer.

    1. How do you center it on a page? Or better yet add gradient fill to each side to get it to stretch completely across the page. My page is 1080px wide. The menu is set at 0px on the left and lacks about an 1/8 of an inch making it to the right side. Yes, I added menus to your original design ending up with 9 menus.

  46. this navigation menu is so good and very useful to me…

  47. Great code, thank you. I am not using the rounded corners nor the gradient, I just wanted a pure CSS horizontal drop-down and that is what I got. I simply intregated it in the template I was building. Changing what I needed to suit my design. But.. on browers compatibility I get an error I am not sure I understand or how to fix it, if it even needs fixing . Displays fine in IE7, Firefox, and Chrome so far. The error is “Expanding Box Problem”. It shows up for the nested ul only.
    Any ideas?
    Thanks…

  48. It’s so nice. Thank you for your sharing and keep it up, please :-)

  49. does anyone knows how to make it work on IE10? Thanks in advance.

  50. great articles thank you……………

  51. Hi, This is absolutely great for starters, i have been looking out on web for nice pure css dropdown menu for multilevel navigation and found this finally.
    This is great. But i see odd behaviour in IE, may be the browser settings but i thought i can get some help here.

    And here is my Issue description:
    I use framework 2.0 and visual studio2008 for developing my website.

    1. Majority of End users that will see my website are IE8 or IE7 users, rarely chrome,firefox and the rest.
    On IE if i go to settings and change the mode to IE – IE8 standards then the site menu looks as expected but otherwise the menu dropdown items fall apart and doesnt show under
    parent item and On-Hover at all .

    Temporary solution is that i switch the mode to IE8-IE8 standards everytime i want to demo the menu which i feel isnt right.
    Tried adjusting z-index and several other solutions like “display:block” but none worked.

    2. Also the -moz-box-shadow background RGB colors doesnt show appropriate colors on IE but looks good on Firfox and chrome. This is least priority, i can change property if
    this doesnt work in IE old versions.

    Can these issues be fixed at all.

    At the least i would like the menu to show dropdowns on ‘hover and click’ as expected in three browsers without having to changing the modes, is this acheivable?

    Please can someone suggest.

  52. Hi,

    This works for me perfectly in firefox, safari but on IE8 the dropdown menu is not falling under the parent item.please help, here is the css style that i have used:
    #nav {

    float: left;
    font: bold 12px Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    border-top: 1px solid #2b2e30;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* border-radius: 5px;*/
    overflow: hidden;

    }

    #nav ul {

    vertical-align:middle;
    margin:0;
    padding:0;
    list-style:none;
    display:block;

    }

    #nav ul li {
    float:left;
    width: 155px;
    display: inline-block;
    }

    #nav ul li a {
    float: left;
    color:#E9E9E9;
    padding: 10px 20px;
    text-decoration:none;
    background:#3C4042;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
    background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
    background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
    /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;*/
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0,0,0,0.2);
    /*text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);*/
    width: 155px;
    }
    #nav ul li a:hover {
    color:#E9E9E9;
    }
    #nav ul li a:hover,
    #nav ul li:hover > a {
    color: #252525;
    background:#7E7E7E;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;*/
    width: 155px;
    }

    #nav li ul a:hover,
    #nav ul li li:hover > a {
    color: #2c2c2c;
    background:#7E7E7E;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
    background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-top: 1px solid #7E7E7E;
    width: 120px;
    z-index: 9999;
    /*text-shadow: 0 1px rgba(255, 255, 255, 0.3);*/

    }

    #nav li ul {
    background:#3C4042;
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    left: -999em;
    margin: 35px 0 0;
    position: absolute;
    width: 155px;
    z-index: 9999;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;*/
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
    border: 2px solid rgba(0, 0, 0, 0.5);
    }

    #nav li:hover ul {
    left: auto;
    display:block;
    }

    #nav li ul a {
    background: none;
    border: 0 none;
    margin-right: 0;
    width: 155px;
    /*box-shadow: none;*/
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    }

    #nav li li ul {
    margin: -1px 0 0 155px;
    -webkit-border-radius: 0 10px 10px 10px;
    -moz-border-radius: 0 10px 10px 10px;
    border-radius: 0 10px 10px 10px;
    visibility:hidden;
    }

    #nav li li:hover ul {
    visibility:visible;

    }

    #nav ul ul li:last-child > a {
    width: 120px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
    }

    #nav ul ul ul li:first-child > a {
    width: 120px;
    -moz-border-radius:0 10px 0 0;
    -webkit-border-radius:0 10px 0 0;
    /*border-radius:0 10px 0 0;*/
    }
    /* fix ie6 small issue */
    /* we should always avoid using hack like this */
    /* should put it into separate file : ) */
    *html #nav ul {
    margin:0 0 0 -2px;
    }

  53. nice post
    thanks

  54. I have only a simple question, i need the menu as four level drop down menu, i tried to repeat the in the last but the last one opens with the first one,

    Please if any one can help me with that i will be grateful

    Thanks in advance

  55. hellow :
    can you edite this menu to right ?
    please help me .

  56. anyone have a fix for forth level?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>