Pure CSS Vertical Menu

Today we are going to build the second most common menu navigation, the vertical navigation menu. Here we are going to be using only pure CSS and un-ordered lists to create our menu with three sub-levels. This version of the vertical navigation menu will work in IE5 / IE6 (with CSS pseudo hover fix), IE7, IE8, IE9, as well as FF, Safari and Chrome.

To start lets create our menus container block and give it an id of “navigation”:

Next we will add our first level menu items:

After that, we are going to give our list items some names:

Great let’s see what we have so far:


Obviously it’s not going to work for us, but I think it’s important to point out the vertical fashion that is given to us by default in the ordered lists. The un-ordered list for vertical menus almost seems to be a match made in CSS heaven, vs. its sister menu the horizontal navigation menu.

So let begin to add some style to our first level un-ordered list, and its parent container “navigation”. In our header let’s create style tags that will contain all our CSS.

Our first CSS rule we want to add would be for our container:


Here we are going to give our main container some structure by setting its width to 150 pixels. We also set our menu’s font size to that of 0.75em that will cascade down our entire menu.

Great, next we are going to create two new rules for our first level un-ordered list:


Here we are pointing to our “navigation” container first, then our first un-ordered list and assigning styles accordingly. We have removed the default margin and padding that comes default with a un-ordered list by setting both to 0 pixels. We also remove any default list style by setting list-style to none, over all our list items.

Ok, let’s see what we have so far.

Figure one

Again not looking to hot right now, but we will get there. Our next step is to assign some styles to only our top level list items, by going back to our HTML markup and add a new class to our un-ordered element. While we are adding this new class, let’s also add some links to our HTML markup as well like so:

Now we can better target just our top level menu and its list items. With our new top-level class in place, let’s now add the following new styles:

#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }

ul.top-level { background:#666; }

ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;

Here we are pointing to our new top-level (ul element) and setting it background color to be #666 (dark gray). Next we point to our top-level ul, then its list item children and apply a border to top and bottom with a color of #fff (white) and is 1px wide.

Great, now lets target our menu’s anchor tags as well by adding the following styles:

#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }

ul.top-level { background:#666; }

ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;

#navigation a {
 color: #fff;
 cursor: pointer;
 line-height: 25px;
 text-indent: 10px;                   

#navigation a:hover{

To begin, we set a height of 25 pixels to space out our list item’s anchors out vertically, then we make up for text placement by using the line-height that is equal to our height. We also set a text-indent to inset the text a little, text-decoration to remove underlines, color to #fff (White), cursor to pointer and set a full width of 100%.

The most important part of our new styles, is that we set a display block on our anchor tags. Without setting them to be rendered as block, our width and height are meaningless.

Our last bit of styles is for the hover state of our anchor tags. Basically once they are being hovered, we set the text-decoration back to being underline for presentational purposes.

Let’s take a look shall we.


Not too bad.

Before we move onto creating our second level sub menu, lets add some behavior to our menu shall we. Let’s give a color difference to our list items background color if we are hovering over them.

To do this we again reference to our “navigation” container first, and then all the list items in our entire menu. Once we are pointing to our menu’s list items, we append a pseudo hover selector to begin the statement for our color behavior:

#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; } 

ul.top-level { background:#666; }
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;

#navigation a {
 color: #fff;
 cursor: pointer;
 line-height: 25px;
 text-indent: 10px;

#navigation a:hover{

#navigation li:hover {
 background: #f90;
 position: relative;

Here we are  giving our list items both a background-color of #F90, and setting its position to be that of “relative”. We use relative because it turns our list items into stopping points for any immediate children that have a position of absolute. We also get the position of relative to our list items here at the hover state, in order to fix IE related ghost bug issues.

Here is what our menu behavior should look like now:


Let’s now move into our second level un-ordered lists. We always nest our sub menus deeper within the list item we want them to be displayed under, like the following now:

Take notice at how we have nested our new un-ordered lists to our first level list items. Also notice that these new level of un-orderd lists carry a new class of “sub-level”. From here on out, all sub level menus will need to have this “sub-level” class.

Great let’s move back up to our CSS and begin to set some visual rules to these second level un-ordered lists.
To give styles to these second level un-ordered lists, simple reference them now by our new class of “sub-level” like so:

ul.sub-level {
    display: none;

Here we are giving our sub-level un-ordered lists a display of none. We do this so that by default, our second level un-ordered lists are hidden until told otherwise.

So now lets write the styles to expose our sub-level menus when its parent is being hoverd:

ul.sub-level {
    display: none;

li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;

Starting from the parent element (li), we set a pseudo hover selector and then point to our .sub-level menus. Once any parent list item is hovered, its child sub-level menu will be set to a display of block (exposed). We also set a position absolute and finally top and left styles to positioned around our sub-level menus in their parent’s relatively.

The next thing we want to setup, is our sub-level list items styles:

ul.sub-level {
    display: none;

li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;

ul.sub-level li {
    border: none;

Here we are simply floating our sub-level list items to the left, and setting their width to be fixed at a 150px. We also are removing the default borders that we setup on our global list item rule near the top.

Let’s look at what we have so far:


Looking good! Now let’s create our last level un-ordered list. Like before we are going to insert a new un-ordered lists with in the list item we want to expose these third level un-ordered lists. We again are also giving this new level a class of sub-level.

Here is what our final HTML markup would look like:

Last few styles are for creative preference and bug squashing really:

/*Seconda Level*/
#navigation .sub-level {
    background: #999;

/*Third Level*/
#navigation .sub-level .sub-level {
    background: #09C;

Our first style is pointing to our first sub-level menus from #navigation (#navigaiton ul ul) and setting its background to #999 (light gray). The second style is pointing to our second sub-level menus also from #navigation and setting its background to #09c(light blue). This shows you how to specifically target different levels of nested menus and style them accordingly if you desire.

The last two styles are to help out some confused browsers (IE6+) about what to do with third level menus, while hovering a top level menu item.

You can more or less consider this to be a nice reset to kick them browsers back into shape:

li:hover .sub-level .sub-level {

.sub-level li:hover .sub-level {

Let’s break down these reset selectors. The first states, “When a list item is being hovered, find the closest nested .sub-level menu. If that closest nested sub-level menu also has a nested .sub-level menu, hide it’s nested sub-level menu from view.” We do this so that only one sub-level menu is exposed at a time while its parent list item is being hovered.

Nest we reverse the role to make up for our first reset condition. This second selector is saying “If you are with in a sub-level menu item, and you hover over a list item that indeed has a nested sub-level menu, expose it’s sub-level menu.”

Lets see what we have now! You can click the figure (image) below to preview the tutorial example:

Tutorial's Working Example

Click Here for Tutorial’s Working Example:


If you need this to work in IE6, please refer to this tutorial here. http://www.devinrolsen.com/fix-css-pseudo-hover/

That’s it everyone, you have just created a pure CSS vertical menu with sub level pop outs that is completely cross browser friendly.

Thanks everyone.

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus

350 Responses to “Pure CSS Vertical Menu”

  1. Jess says:


    I faced a problem before i even got started, oh boy do I feel stupid! ;)

    How do I make the HTML “read” the CSS? I mean, the CSS doesn’t change the look at all, I’m stuck in the very beginning where we have only given names to the list items. Could you please tell me what I’m missing here?

  2. panagiotis says:

    Thanks a lot… great job, really!!! I had a hard time looking for a tutorial about vertical popout menus and luckily I found yours finally!!! Thanks again!!!! :) :)

  3. Thank you very much for this tutorial.I am having been looking everywhere for a vertical navigation tutorial.Luckily stumbled on this page.You a star.

  4. Fatih says:

    i used and it make me :) thnx

  5. Brian says:

    Thanks for this. Its amazing what you can do with a little CSS and a lot of brains!

    I need something like this for one of the sites I am working on

    Once again Thanks

  6. David Rankin says:

    Oops, the information between the () was lost in my first post, it should be (<ul><li><a…>&lt/a>) [I hope that works].

    One other note. I have found the opera ‘Mini’ browser for iPhone has difficulty with CSS menus. It appears to attempt to select the bounding <ul> blocks instead of opening the submenu. (I’ve opened a bug with opera)

  7. David Rankin says:


    I have a similar vertical CSS menu implementation at my site. I’m curious if you have ever done any testing on the practical limits of the number of entries you can have in a menu before you begin to experience delays in menu performance. My largest number of child entries on the 3rd level is 15. (if you visit the site that is under Programming->C/C++ Programming->(15 entries). I haven’t revisited my menus in several years, but on doing so, I notice a bit of delay in the :hover properties of the menu items. Not bad, but I don’t believe that was present a couple of years ago. Do you have any information on browser engine changes or DOM changes that would affect CSS menu performance? Also, if you have any idea of the practical limits for submenu entries, I would be interested in that as well.

    Lastly, on the first entry () I have found it useful to handle the visibility in two ways. If you want the entry w/o subs (to use for your ‘Home’ entry or the like) then use it as is, if you would like the first entry to have subs, then simply hide the first () with the display:none property as you have shown. The option to leave it visible and use it as a persistent ‘Home’ navigation entry is also nice as well.

  8. Mirco says:

    Hi devin,

    I am having problem while the sub-level menu goes over a jquery slides in the body page which show images. The sub-level menu is showed behind the images while these are scrolling , and the images cross the sub-level menu.

    Any ideas for this ?

    Many thanks

  9. s3rchl says:

    Thank a lot man.
    This was very helpful.
    Thanks again

  10. Mirco says:

    a working example .. clear, simple and easy to be implemented .. thx Devin.

  11. chennai car hire says:

    good tutorials thanks for sharing it

  12. Helen says:

    This is a great tutorial, thanks!
    One question: do you know how to use CSS (not JS) for the submenus to stay visible once clicked on the parent menu item?

  13. Luca says:

    Hello Devin,
    the page you wrote works fine!
    The code part don’t work in my copy is only “ul.top-level” (all sub-level work).
    I had deleted “.top-level” and now code work.
    I don’t know why.
    Tomorrow I’ll try to copy again css declaration from your work page in my css file, maybe I wrote bad something.
    Thanks however for your help.

  14. Yucca says:

    Apologies… I forgot to mention that I use windows 7 ultimate with XP mode IE7, IE8, VirtualBox + Ubuntu, Chrome, Opera and Tomcat 7. Site developed using facelets… not really a web designer so tutorials like yours are a big help for people like me.

    Tutorials on your site are awesome, clear and easy to understand.

  15. Yucca says:

    Hello Devin. Thank you so much for posting this. I would like to know if you can help with an issue I am having related to a vertical
    css navigation bar that seems to loose focus when the ‘title’ attribute content gets mouse focus? Behavior is not consistent across browsers and notably FF7 and CSS3 compliant browsers perform better than IE8 as an example…

    Please can you have a look at http://thejarbar.org the left navigation bar gets tricky when hovering to third level ul’s :D

    thejartender :D

  16. Luca says:

    .top-level and all .sub-level declarations don’t work.
    I use IE 7

  17. adrian says:

    Hi! It’s very cool this example but one question pls:
    what abou “focus”? When “contact” selected there is no different background color there..? Any idea pls?

  18. Vijay Akkineni says:

    I just love this article, Thanks a ton and keep up the god work.

  19. WebmasterAndre says:

    Is there any way of making the sublists appear next to the parent list and not below and overlapping them?

  20. tom anderson says:

    Can you point me to where this terrific menu can be modified to drop down another level?

    Thanks for sharing a great menu.

  21. biju b says:


  22. David Cowhig says:

    Hi Devin

    Please scratch my previous comment. I’ve found the problem, it was a minor coding error on my part. Thanks again for a great tutorial

  23. David Cowhig says:

    Hi Devin

    I’m a designer in Ireland and I used your tutorial to create a vertical menu on the above site. I think it’s brilliant, it looks really well and I love the fact that I can adapt the colors to suit any site, thank you for the tutorial. However, I tested it on a number of browsers (4 in total). Three were fine, but, I found that it does not work well on IE8. I have 9 buttons in total with just 1 leading to a 2nd level menu. The lower 4 buttons on the main menu do not display my chosen background color, & instead use the background color of the website. All of the 2nd level menu buttons work fine. I’ve tried a number of menus both horizontal and vertical and I’ve found IE the most difficult browser in terms of conflict. Have I done something wrong or is there something else I need, to make it work? Thanks again for the tutorial

  24. Heidi Pluska says:

    Awesome tutorial! Just what I needed!

  25. ALY ELGARHY says:

    What a nice and easy tutorial. It’s very good, easy to control and make, but at the same time it’s really amazing

  26. Olli says:

    Absolutely brilliant tutorial. Thank you. I’ve used horizontal menus like this before but I really wanted a nested vertical one for my next site as it is going to be a big project.
    I don’t suppose you have a tutorial for a comments section like this that is as simple to follow as that one do you?

    Although it would be great if the form was at the top when you have so many comments to scroll through.

  27. Isaiah says:

    Scratch this post I figured it out. Thank you so much this is an amazing tutorial!

  28. Isaiah says:

    Hello, I fist want to say ty so much for this tutorial. Unbelievable!! I have been trying to find this exact menu style but have only been able to find code for hori menus. I am having an issue however. I am new to this stuff so dont feel bad loling at me if this is an easy fix :) I am trying to add more links to the top menu and have tried a bunch of different things to add it. I see how to add sub menu and sub sub menu but just adding a new top menu link has baffled me. I have tried every combo trying to copy whaqt was done for the other links but no luck. Thank You so much ahead of time. I look forward to hearing from you.

    Thank You,

    Ps – I tried to mix this menu with a different menu i found and WOW did i mess things up on that one :/ I cleared that site and put the code on it but then decided to scrap that completely since you have perfect menu built already.

  29. Michael Hayden says:

    does this not work in firefox version 6.0.2?

  30. sean says:


    Great menu! It seems quirky in IE7 and safari. It has to do with the layer order, as IE 7, it shows up beyond the content Div an inch down. (1st inch down it displays find)

  31. Yomi Adesoye says:

    This is an excellent write up. I spent hours trying to do something similar without success. But i noticed that :hover and some other codes do not work in IE. what other solution can be used to fix this problem (csshoverfix aside).

  32. Danson says:

    I love you man~~~

  33. smiindia says:

    great tutorial , Absolutely fantastic tutorial. Thank you very much.

  34. pooja says:

    your web site is very help full for students i m very happy to see your example

  35. believeinsharing says:

    @Devin R. Olsen:
    Thanks I did try to increase the width but of no use, I find another solution,
    I used ” white-space:nowrap;” in second level “li” item and its working fine.
    Thanks anyways

  36. believeinsharing says:

    thx for code, its working fine…
    I am using it for 2 level menu, but I am facing 1 prob,
    My second level menu has two words like “New York”,
    in this case New is using one line and York is coming on another line,
    its working fine it i remove space like NewYork,
    Thanks in advance

    • @believeinsharing, sounds like your sub level ul, list items or anchors have a fixed width that is too small for this length of copy. Try increasing this fixed width to anticipate all lengths of sub menu list items copy length to be on a single line.

      Hope this helps, but with out a link I’m kinda just assuming at this point.

  37. Lindsay says:

    Hi Devin. Complete newbie for website designing. I love this look and want to replicate for my site, but the tool that I am using only allows me an HTML box (i.e. I cannot see where i may be albe to add or edit CSS code so I’m assuming it’s not possible). My questions:
    1) Can I mix the CSS and HTML into one HTML box for this to work on my site?
    2) I can edit the Tag and I can add Javascript to the onload or onunload attributes of the body tag.and header for each page but I have NO idea what each of those really mean.

    If I have the options to make this sort of sidebar functional on my website, could you reorganize the code into copy and paste blocks that I can go back and edit. I have no problems editing colors, borders, etc but the meat and potatoes is more advanced for me.
    THANK YOU for helping!

    Do you have the code written out

    • @Lindsay, although you can include this CSS code into the head of your document with inline style tags, I do not recommend this because it will be loaded per page, instead of being cached in a style sheet when the visitor first visits.

      I can’t comment on the JS, but again I would not include anything inline such as onload for body, but rather use an external JS script linked to the document via the head.

      As for the code, please visit the demo and view the pages source, here you will find both the HTML and CSS (CSS code is linked in the head via the link tag as mentioned above).

      Thanks for your complements and interest in my tutorial.

  38. Marc says:

    This is a wonderful tutorial. Thank you for sharing it. Although I must say that it doesn’t work for me on my Mozilla Firefox 5.0. The first sub-level shows horizontally while the second shows ok (vertical). I tried to trim the code to enhance it without luck. I ended up just copying and pasting the code from the page and I got the results mentioned above. Yet, THANK YOU for sharing it. I’ll keep working on the code.

  39. Adam says:

    after looooong hours and day of serching and trying, this is the BEST html/css drop down down tutorial. The use of different classes on the sub-level menus is inspired! that’s why guys like me comoe to guys like you (!) ;o) thank you

  40. tangent says:

    thank you! this is a great tutorial!

  41. Deepu Das says:

    great job : lol :P

  42. Eddy9019 says:

    thx for this tutorial!!!

  43. Karthic Kumaran says:

    Excellent tutorial!!!

    Thanks for sharing

  44. teddy says:

    Thanks much. I’ve been really searching for this tut

  45. Joey B says:

    I loved this tutorial, but I two questions.
    How would I beable to make all the submenus even with the main menu,and how can I make them not overlap?

  46. Philip says:

    This has been great and really helped my understanding of CSS. I have copied the script exactly but when I view in ie9 the sub menus don’t show. once the sub is set to ‘none’ it just doesn’t want to turn on again. any suggestions what I might be doing wrong?

  47. johnson says:

    it’s really really great…………..

  48. Humberto says:

    Thank you so much!!!

  49. Half Marathon says:

    Great tutorial. The progression of the tutorial is awesome.

  50. Ananda says:


    Thank you for this tut, exactly what I have been searching for! I was hoping I could use this functionality with pictures, is that possible??



  51. Rhysling says:

    Excellent tutorial!

    BTW, IE9 requires at the top for the fancy stuff to work. See: http://msdn.microsoft.com/library/cc288325.aspx

    • @Rhysling – Glad you enjoyed the article. The link you supply provides a well outlined HTML5 document that is recognized by IE9, however to say that a doctype of HTML5 is required for this to work is just wrong. As stated already, going to http://tinyurl.com/3alpdsf, you can see the finished product is using an HTML4 Transitional doctype and still works in IE9 just fine.

      I just wanted to make this clear so that people don’t start to assuming that they must have their documents be HTML5 for this method to work.

  52. Mac says:

    I’ve problem hover is not working in IE9 do you have some solution?

  53. K.Sunil Raghu Vamsee says:

    Great tutorial, will be sharing with my students too.

  54. developer says:

    how can this be pure css if you’re using behavior:url(../cssHoverFix.htc);

    • @developer – There is no such thing as a pure CSS menu with sub menus if you bring IE6 into the mix.
      That cssHoverFix.htc only extends the pseudo hover selector to work with all elements in IE6. You see, IE6 only seems to see the pseudo hover selector as being compatible with anchor tags. We therefor cant make a menu with sub menus nested in anchor tags, and are forced to use cssHoverFix.htc for IE6 only.

      If IE6 is not of any concern, then remove the cssHoverFix.htc and this truly is a 100% pure CSS solution. I hope this helps clear some things up.

  55. Patuie says:

    Thanks for the menu. How do I keep the menu from being behind a picture. I tied the z-index but am not sure where to place it.

  56. Phill says:

    I have been searching for something like this unfortunately what you show isn’t what is displayed on my computer!

    The navigation doesn’t properly function and each of sub-menus are across the top of the page over top of each other?

  57. spss help says:

    Great tutorial, as I wanted with the box effect.

  58. branden says:

    Hi and thanks for the tutorial, but whenever i make the the menu, i get underlines under my font. How can i fix this?

  59. Parameswaran_chennai says:

    hi devin,

    Many thanks for your time and help with this matter. Its very useful for me



  60. Wen Kahler says:

    Good write-up, I¡¦m regular visitor of one¡¦s blog, maintain up the nice operate, and It’s going to be a regular visitor for a long time.

  61. Dan says:

    I found a work around.
    Basically if you need to set up a list with terms using hypens like “all-in-one”, you need to include spaces. (“all – in – one” will not work, you must type out the spaces in code as in “all – in – one”.)
    Hope this helps someone later on down the road.

  62. Dan says:

    Exactly what I was looking for. I am having one issue though:
    Some of the menu items I have to include use hyphenns, but Firefox seems to be the only browser that doesn’t have a problem displaying them. All other browsers I’ve tested (IE, Chrome,Safari, and Opera) are displaying the second of two hypens and the following text on the line below it, covering the next menu item.
    Any ideas?

  63. Lina says:

    Trying this tutorial out it works fine but trying to implement it in my own menu the submenus doesn’t show at all. What is it that makes it show? (I have the div ul li:hover ul: display:block; but doesn’t help) And what changes to the divs do I need to do? I have a vertical menu with hover and selected. If you could point me in the right direction I would be grateful.

    Best regards,

  64. cssnub says:

    Just did the body cssHoverFix.htc and it works on IE6 also.

    Thanks much.

  65. Aye says:

    Thanks Devin for this wonderful tutorial!

  66. William Heim says:

    1) This is an outstanding menu. Thank you.

    2) If you experience IE menu ghosting try this fix (it worked for me);

    display:none; to visibility:hidden;
    display:block; to visibility:visible;

  67. HasanG says:

    I cant see the download button??

  68. Phan My says:

    Hi Devin,
    Thank you very much. This tutorial is very helpful for me.
    God bless you.
    Best regards,

  69. Tim S. says:

    Is it possible for the hover function to work without the “csshoverfix” script?

    • @Tim S.
      So many directions I can take this question, let me start by generalizing this question.

      You should only ever have a need for a “csshoverfix” script if you are looking to make your website IE6 compatible. So, if you have no concern for this browser version then you have no need for this hover fix.

      Second, is why you need to use a CSS pseudo hover selector. If you are using it to display content or dynamically interact with any other element besides an anchor tag, and you need to be IE6 compatible, then you have two options.

      First option is to make use of the “csshoverfix” so that :hover works with non-anchor tag elements in IE6.

      Second option is to not use CSS but rather use JavaScript.

      If you are simply wanting to change the styles (text size, color, backgrounds) of an element and utilize the CSS :hover, while also IE6 friendly, then no. Reason being, you can always use an anchor tag with :hover and no fix and have it still work in IE6.

      Hope this clears somethings up.

  70. Tim S. says:

    Do you recommend keeping the css on the same page as the menu itself, or linking to a css file separately, or does it matter?

    • @Tim S.
      Although my tutorial/example shows otherwise for the convenience of learning, I always recommend summing your styles up into an external file.

      Any styles written inline or header of any given page is not truly being cached by browser and ultimately re-downloaded each page visit.

      External style sheets do get cached, and after the first initial download you site will ultimately load faster for the visitor from there on out.

  71. Ted says:

    Thanks so much for this great tutorial… I understand this in a way that I haven’t for a long time…
    A couple of questions
    1. It seemed like the 3rd level menu items got put in inbetween the 1st and 2nd level… seemed counter intuitive . wondering if you could talk about that a bit,
    2. Why the ‘>’ sign on the last few css rules? haven’t dealt with those before.

    Thanks again for a GREAT tutorial

  72. Gerry Blais says:

    Hi Devin,

    Many thanks for your time and help with this matter.It is really appreciated.
    I will try it as soon as possible.

    Thank you again for your great tutorials!

    Best regards,


  73. Giri H RamMohan says:

    This is indeed a good post.
    How to change the background color of the selected menu. Any Idea?

  74. Monica says:

    I have searched high and low for a vertical navbar with submenus, and this was just what the doctor ordered. :) A very big THANK YOU for posting this!

  75. Hi Devin,

    Many thanks for sharing your experience. it really helped me in building my side bar menu. I am new to web design and I find I have a lot to understand :-)

    I have one question for you.
    Once I linked a page to it and clicked, the white of the text is changed to blue.

    if you go to the website http://www.computerstorefinder.co.uk/computer_stores.html and click on “refurbished computers”, you will see the sub-menu text in blue.
    How do I get it to stay white?

    My horizontal menu is always white (if you click on it, I only linked the HOME COMPUTER STORES – COMPUTER CATEGORIES and APPLE sections.

    Your advice will be invaluable as I do not know what to do to correct it.

    Many thanks in advance for your help and advice.


    • @Gerry Blais – There are 3 main states to any link. a(standard state), a:hover, a:active.

      a {color:#fff;} will make the link white.
      a:hover {color:#fff;} will make the link white only when hovering.
      a:active {color:#fff;} will make the link white only when clicked and focused when clicked.

      I would try a,a:hover,a:active {color:#fff;} to resolve your issue.

  76. kasorelo says:

    Thank you very much, great tutorial…

  77. Paul K says:

    Thank you so much for taking the time to post this fantastic, easy to follow tutorial, I’m a total beginner and have spent 2 days trying to find easily understandable and executable coding.


  78. Scott says:

    Is there a way to have the sub navs always align with the top of the level 1 nav items and keep the box active at full height (so if you are choosing News, and the sub list is only 2 items, that it stays active to get at the top sub items0?

  79. Sudhir Kumar says:

    i am very to you for giving such a nice idea to create vertical menu in css.

  80. Nashirmohammad says:

    Nice Description about css menu.
    Thank U for all

  81. Dawn B says:

    I have an unordered list that is 3 deep that I am using for a menu. Level 1 is horizontal. Level 2 is vertical. Level 3 is vertical. I can hide levels 2 and 3. When I hover over level 1, levels 2 and 3 show up.
    From your tutorial I was able to use #YESSMenu li.listlevelone:hover ul li ul {display:none; } to hide level 3.
    How do I reveal Level 3 upon level 2 hover?
    From your tutorial I tried #YESSMenu ul > ul ul li:hover ul {display:block;} to reveal Level 3 but it didn’t work. Can you help?

  82. quu says:

    When using Joomla as Backend CMS the settings “Expand all Elements in List-Navigation” has to be activated!

  83. quu says:

    In my case, the menu does not work correctly. the hover and pop-out effect starts AFTER i activated (klicked) on the first level item. all other menus don’t work.
    can you help?

  84. Prateek says:

    Good one!!!!It really help………

  85. Scoop says:

    Thanks very much for this tutorial — it was just what I needed!

    I ran in to the same problem as another commenter — the final level wasn’t displaying. I finally got it to work by copying the CSS from your example page, which must have some subtle differences from the CSS in the tutorial. In any case, it now works great!

  86. bahadir says:

    thank u but i have a problem with this script, it doesnt work on IE while i put my menu into a table cell. but works on firefox under the same conditions.

  87. Nathan says:

    great great script!!

  88. Shiv says:

    Nice script …….

  89. Ganapthi says:

    Nice tutorial, really learned something out of it. thx great!

  90. ez says:

    Thanks for sharing the code.It was a good and step by step tutorial and its easy to understand. I had copied exactly the code for Pure CSS Vertical menu and check whether it works with all version of IE. I just found out, it does not work in IE8 above.Is there any solution to overcome the problem?Thanks.

  91. Van Hammersley says:

    Thanks for the quick reply with fix on issue. I actually ended up figuring it out after some tweaking before seeing your post, but yeah, that did the trick.

    Thanks again!

  92. Van Hammersley says:

    Hi Devin, this is a great tutorial. Thanks for posting. I had one question though re: a previous post from someone, and having the same problem.

    I’m trying to get it so the whole list item/LI acts as a link vs. just the txt.

    I saw you previously answered a query on that, per below. I tried literally what you listed below, and it basically made my text link disappear (since display:none), etc. Am I missing something here?

    Any help would be appreciated!


    // ——
    Hi Adam,
    Great question, in order to have the link element fill the entire list item you must first edit:

    #navigation ul li a
    By giving it a display:none; and a padding-left:10px;

    Next you are going to want to edit:

    #navigation ul li
    By removing padding-left:10px;

    That’s it!

  93. Reading says:

    I can’t seem to find a copy of the cssHoverFix.htc at your \”CSS IE Hover Fix\” tutorial under tutorials at the pull out on top. Is it still available and recommended? Thanks for a great–I just need this one piece.

  94. hans says:

    Very nice sample ! Thanks for sharing :)

  95. Milan says:

    Earlier today I described a problem with your vertical menu.
    You simply erased the message.
    To be more specific, the problem is occuring in IE 7.0.5730.13
    Do you plan to look at the problem or should I just move on…

    • @Milan,
      I am very sorry, but what you were seeing was a preview of your comment Milan. I have to approve each and every comment on my site before they are live to everyone else.

      Now that I am home from my full time job, I will certainly try harder to replicate the issue. I’m not able to replicate the issue from what you describe in all my IE7 versions however.

      There is good news though, this bug you describe is called “IE Hover Ghost Bug” and is well documented. Here is an excerpt I wrote on the bug in my “Pure CSS Menu With Infinite Sub Menus Tutorial”.

      This one is called the “IE:Hover Ghost Bug” and in its basics it leaves deeply nested sub menus in a state of constant display after being hovered. To fix this bug we simply look at our last style as a igniting point. By giving style and structure to our sub menus when told to be displayed, vs. having a constant rule that is always giving style and structure to our element at all times, we squash the IE bug.

  96. Milan says:

    Thanks for the code. However, there is a problem in IE 7 with your working example. To see that on your page do exactly what your last menu picture shows, then

    1) if you go out with the mouse (* straight up *) and then reenter FAQ you will see on IE7 a blank box for menu at level 3

    2) if you retrace with the mouse where you came from it will be OK

    This blank box will remain until you revisit it, fill it up, and then exit nicely like in step 2

    This problem does not appear on IE8 or Chrome. Any idea how to fix this?


  97. Sivaranjani says:

    Thank you very much.Now its easier to create navigation bar

  98. TeW says:

    Thanks Devin for the reply and assistance with that. Worked like a charm. The code you put together is simple enough for me to figure out with a little knudge once in awhile. LOL

    I do have a question, is there a way I can change from color backgrounds (selecting colors)to say a a png or gif file for each menu item? I.E. a 2 tone white to light gray gif that still can type over and use the rest of the code here as it is. Just take out the color background part and add the claas id for the background for the individual buttons which all will have the same color backgound?

    I have an old menu that has a Class=type2 that has the background for individual menu items. Not sure how I would remove the color designation in this menu and instead have it pull the Class=type2 for that background. Class=type2 was a background image for menu buttons. The way the old menu was, it had Class=type2 after the url for the button.
    I know this is beyond maybe this course, but I thought I would just ask since you got me in the right direction before.

    Ted W

    • @TeW – I am not sure I follow the question very well as its more graphically oriented, but never the less. CSS :hover selector is not only used to hide and display elements, but can also be used to style elements, such as their backgrounds. If you wish to simply style a series of alike element’s backgrounds not matter the hover state, you use simiple CSS selectors (ul li = all li elements).

      If you wish to have the first and last item in the menu to have unique versions of backgrounds I would use a .first class and a .last class to better isolate and style these element’s backgrounds accordingly.

      Lastly, if you wish to have two classes handle the hover state styles of an element, you are going to have to use JavaScript to change the class attribute upon a mouse over event and a mouse out event.

  99. Hi Devin

    Firstly great tutorials, really easy to understand, my only query, i have typed your code out, character for character, i have checked and double checked the code yet i do not get the same results as you, i have tested in Safari, Firefox, IE and google chrome, all the updated versions, any reasons for this?? i expect it is my fault somewhere, but after 2 hours of trying im at a loss as to what ive done wrong

  100. Ted W says:

    Sorry Devin,
    Copied the code on main web page style type main css and it did not post in previous message sentence. This is what that full sentence should have said.

    Being a novice, right now I have all the css code under “style type” on my web page. Can all that code be put in the style.css other than that which belongs in the html part? What can if any.

    Also removing the underline?

    And if so, HOW?

  101. Ted W says:

    Thanks,this is awesome! I appreciate you putting the time into this. I am very novice and this really was easy getting on on my web page and modifying with your instructions.
    Being a novice, right now I have all the css code under on my web page. Can all that code be put in the style.css other than that which belongs in the html part?
    And if so, HOW?

    Also I tried to remove the underlines and they do not remove. Is there a way to remove the underlines?

    Appreciate you taking the time to put this together!

    Ted W (Phx,AZ.)

    • @Ted W, Yes there is a way to move all your styles to an external file. Simply make a new styles.css (name does not matter) and move your styles to this file. (Note depending on where the file lives you may have to change image paths in your css). Once this styles.css file is created and saved you have to add it to your document via the link header tag.

      Link type of text/css tells the page what type of file you are linking in, href points to the style sheet and media is a way to allow either this style sheet to be for markup styling that’s rendered by the browser at all times, or media=”print” for a print version of this style sheet.

      I hope this helps and there are lots of tutorials on how to link your external style sheets to your documents.

      Ps. removing underlines is a simple style called text-decoration:none; that needs to be applied to your links. Try that on your link selectors for the menu and it should be good to go.

  102. Mira says:

    Thank you very much for your timely help… Now project becomes easier for me to continue….

    Thank u Very Much

  103. @Mira – This tutorial only has two nested or rather sub levels of menus. You can continue to try to build out a third level if you want. A better solution might be my other tutorial:


  104. Hi Adam,
    Great question, in order to have the link element fill the entire list item you must first edit:

    #navigation ul li a
    By giving it a display:block; and a padding-left:10px;

    Next you are going to want to edit:

    #navigation ul li
    By removing padding-left:10px;

    That’s it!

  105. Mira says:

    Hi…. I was working on your code.. But the third unordered list is not displayed when im hovering over its right parent.. Can u please help me to do that…
    Thanks in advance….

  106. Adam says:

    Just what i was looking for! Thank you.

    I program in .NET and was able to implement this menu on my website as the main navigation for the products i sell. The menu is generated at runtime using product category information from my SQL database.

    I do have a question though. When you go to click on the menu to follow a link, you have to click on the text, and you cannot click on the part of the box to the right of the text otherwise you will not follow the link. Is there any way of making the whole ‘row’ a link, and not just the text in that row?


  107. Erin says:

    I tried for a week to make this work on my own. So glad I found your tutorial! It was perfect. Thank you.

  108. Brian says:

    Thanks, This was extremely help full. I think some of the problems you have helped people work through are incredible. You should implement them into the original tutorial.

  109. changpuak says:


    When using Google Maps, on mayst add
    “z-index: 90000001;” to have the menue in front of the map (and not behind).


  110. Mira says:

    And can u update the page the by giving the full code together. I could understand ur explanation very well.. if i got the full code means it would be better for me to complete my project..

    Thank u much

  111. Mira says:

    Hi…. I was working the above code.. but only the main menu only displaying not the sub menus.. kindly tell me where to insert the code for sub menus. i just insert both the code for menus and submenu together in the style tag.. If u solve me the problem means i would be much happy..

    Thanks in advance

  112. Wonderbabe says:

    Dude you rock!

  113. Min says:

    I’m wondering if I could create rounded corners with this code? Could you please show me how? Thanks.

  114. Thanks for the great tutorial! The sub-sub menu was giving me issues. I found other solutions but yours was the cleanest and most resourceful. Thanks again!

  115. @Patrick, valid point.
    :) I get loads of hate mail from people telling me I am doing things wrong cause it wont work for them daily, I took this instance as another one of them cases.

    On that note, indeed we are here to learn so if you observed my comment or demo you can see I simply traversed to all instances of a link inside of li list item and gave it a specific hex color.

    I will update my tutorial a bit later tonight to include this step.

  116. Patrick says:

    Relax. As soon as you add a link, the text turned from white to blue/purple. It’d be nice if it stayed white after it was made into an actual link. I think that is a reasonable point. We all know how to make links but we don’t know how to do CSS. That’s why we’re here.

  117. @Patrick,@Anya – Be warned? Buddy, if it has exploded on you I cant help but think you are the one who is wrong, with your markup that is. Look my main focus here was to show how to get a workable structure of a vertical menu using CSS alone.

    Not to show people how to make a link.

    I have however, updated my demo to include links to prove to everyone that it indeed does work just fine.

    What did I change? I added this to give my links a color of white THAT’S ALL!

    #navigation ul li a {color:#fff;}

    Also, check to make sure you don’t have some weird structure styles setup for anchor tags globally in your style sheet that is screwing up your menus link tags.

  118. Patrick says:

    Menu looks great. But as soon as you add A HREF info it completely breaks. Readers, be careful how much time you decide to invest in this if your hopes are to have a fully functioning vertical menu design.

  119. Corey says:

    I really enjoyed your tutorials. By far some of the best CSS tutorials on the web. I’m curious how you get this “Leave a Reply” thing to work. It’s an html form, I get that, but how are you getting in to post in order like that?

    Any direction you could give me on this would be awesome!

  120. Anya says:

    Hey, the code is great in theory, however it isn’t done for links — what you’d actually need for a working nav. And recoding for the necessary a and a:hover factors is turning out to be a big deal. This would’ve been more helpful as functional code.

  121. Subbu says:

    Good work Devin.. Looks like you have knack for explaining things in a simplistic manner!! Keep up the work.

    I am looking for a pure css vertical menu which is expandle ie levels expanding rather than poping out.

  122. IslandJim says:

    Excellent tut man! sorted me out in no time =)

  123. @Pardeep kumar Dhiman – I think you are saying that the content is being displayed over your menus when they pop out?

    If this is the case, it sounds like you might need to set your menus absolute parent element to have a z-index higher than that of your contents parent element.. I would need a link to further help you.

  124. Pardeep kumar Dhiman says:

    Respected Sir
    Thank U very Much For This Tutorial.
    I am facing a problem.In Home page of my Web Site in Left 25% area is vertical menus and in the rest of the area i have content panel for Content .When I hover the First Level Menu Then Its Child Went Upon the Content in the Content Panel and The content Panel Content is Displayed Inseted of the Menu Heading. Suggest Solution early

  125. Annie says:

    Thanks so much! This works perfectly and with little effort. It is just what I needed.

  126. @Kevin – With out an example link of what you are working on this is hard to visualize. However I see the word “click-able”, and right off the bat this tells me that you are looking for a JavaScript method to display or hide sub menus, not CSS.

    Hover = CSS selector and is equivalent to JavaScript mouse over event.
    Click = JavaScript Event and not CSS at all.

    Also note, that Java and JavaScript are two different things. JavaScript is a client side language and does not rely on web servers support.

  127. Kevin says:

    Hello Devin,

    Your code works perfectly! I have adapted it a little bit. The menu expands directly under the headermenu. i.e. menu 1 items show directly under menu 1, in the space between menu 1 and 2. The only problem I’m facing now is that I need to make the whole area of a button clickable to make sure they stay focused.

    Example, mouse pointer stands on menu 1, menu 1 extends, I want to hover to menu 4 but the second menu 1 loses focus it collapses and I need to move the mouse up to view menu 4. This is annoying for visitors.

    Can you think with me and come up with a solution? I’ve tried to turn my headermenu’s into a href but that doesn’t solve it, since the a href doens’t cover the whole headermenu area which is clickable.

    (Java isn’t a solution since my server doesn’t support it)

  128. @shaila – I would need more information about what you mean by linking. Do you mean you are having a problem adding <a href=”YOURURL”>YOUR LINK TEXT</a> link to your menu items?

  129. @Stephen & @Mike – Yes I can, http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/

    This will show you how to have an infinite amount of sub menus with very lightweight pure CSS!

  130. Eichto02 says:

    Nicely done!.
    I’ve used all these codes on my already put up website!
    Thanks for sharing these codes, i hope there’s more codes that i get to thank! :)

  131. shaila says:

    Sir i am facing problem in linking this menu to other webpages can u plz help me out

  132. Benny says:


    I want to use your CSS based menu on my new sites I am building at the moment. The menu does not work because I use as a starter line. I need this for the streched backgrounds in the header and menu. Do you have a solution for this?



  133. Stephen says:

    hi friends,

    this css is very much helpful for creating vertical menu without java script. i really thanks to Devin R. Olsen. and can you help me, how to add more than three sub menus?

    thanks and regards
    stephen s

  134. Sue says:

    Was desperately trying to get the positioning of my vertical navigation bar right before a deadline – your article got me there – thank you :-)

  135. Roman says:

    Perfekt! muss auch so was schönes ausprobieren. Danke :)

  136. Fannyfu says:

    Muchas gracias por este manual tan bien explicado. Me cayo como anillo al dedo.

  137. Sophie says:

    This is sublime, but I am having a problem moving the whole thing about the page- it’s locked to top-left position, and it seems I can’t change it… Am I missing something or am I not understanding what tags I must use?

    Thank you, by the way, for posting this… albeit the small issue I’m having, this has been of exceptional help.

  138. Mike says:

    I very much like your Pure CSS Vertical menu example.
    I have a question!

    My menu is quite long and has a large number of 3rd level options so when the menu is expanded they unfold below the screen out of view, so you need to use your mouse wheel to bring them into focus. I can see that these are shown as “absolute”, is there a way of keeping them in view “without the use of Java”?

  139. Aican says:

    Nice tuition, and cool display of feedback !

  140. nayan says:

    I have integrated it in facebook but it does not work.

  141. Warren says:

    What a great tool for the rest of us to learn quickly!
    I made a few changes successfully and still trying to change the underlined blue text to regular black. Any suggestions how to do that? I added “COLOR:#0000; TEXT-DECORATIO: none;” to every line and still not able to get it right.

  142. James says:

    Wow! Thanks. Great stuff. I’m using this CSS Vertical menu in my current project and look forward to coming back for other tutuorials.

    Would you share what development environment you use? Looking at the code screen shots on other tutorials, the code looks well colored, easy to follow.

  143. @Lt. D. Young,

    Sounds to me like you need to give the anchor a “display:block;” style. By telling the anchor tag to behave like a block you can use “with:100%;” like you would with block like elements.

    Hope this helps.

  144. First, Great tutorial. Was able to grasp the concept within the first 10 minutes of analyzing. Now, I have run into a problem that I may need assistance with. The li:hover works great, until I add an anchor tag. I’ve gotten it to effect the font color change on hover, but only if you hover over the verbage itself. I’m trying a span for the width of the div & li – however to no avail. I know it has to be something very simple, as I have done it with a horizontal nav bar. I tried to merge the two sets of css, but i have run out of ideas. (not great for someone who’s been designing for 15+ years, eh?)

    Please Advise.

    Lt. D. Young

  145. read says:

    Great article, very easy to follow.

  146. Unsaksgaw says:

    …please where can I buy a unicorn?

  147. K Sridher says:

    You have used “display”none” property and seo expert say hiding text using css is not advisible.

  148. MTrong says:

    Very nice thanks a lot!!! I’m big fan your site

  149. chendo says:

    Nice tutorial, I learned some new tricks.

    I used div’s instead of ul’s (I don’t really like ul’s) still your design man, thanks.

  150. Polprav says:

    Hello from Russia!
    Can I quote a post in your blog with the link to you?

  151. justin says:

    In IE6 This Menu not Working

  152. sowjanya says:

    Easy to understand and learn.
    thank you.

  153. Tommy says:

    Dear author,

    You just made my day. Thank you so much for this tutorial.

    This tutorial helps a lot and probably the simplest to follow YET the BEST on the internet.

    Thank you.

  154. fla says:

    awesome man, exactly what I needed

  155. vincent says:

    ok hi again,

    I just found something out; in safari the sub is horizontal (preferable) and I checked another page in firefox and there it is vertical! How can i change it to horizontal?? (in the css)

    Cheers Vincent

  156. vincent says:

    Hi, tnx for the great tutorial! I implemented it and it works great with safari, although I expected it to roll down instead of a horizontal menu, I am happy with it though.

    But , when I checked it in Mac Firefox I see only the first submenu item. Any idea how to solve this

    Many thanks

  157. Hi Susan, the code is correct. The problem was one of the example images was out of place. Please have another stab at the step by step tutorial again. I just went from start to finish and the end result was how it should be now.

    Also note, each level of the menu is broken into chunks of code, we go over each chunk of code one rule at a time. Each new rule to each chunk of code is bolded to give relevance over this rule(s) we are talking about.

  158. Susan says:

    The wrong css code appears after this paragraph:

    “To do this we again reference to our “navigation” container first, then our first unordered list and then our list items them self. Once we are pointing to our menus list items we add a pseudo hover to begin the statement for our behavior.”

    It’s the same as the one before.

    Would love to finish this tutorial.

  159. nit_inn4u says:

    Easy to use & good in look

  160. Dude this is great!

    I wish the link for the working example was valid :(

  161. Walaka says:

    walaka yeh tum kia karti hai

  162. Ben says:

    Very nice thanks a lot!!! just wish there was a css function \”click\”!!

  163. Dan says:

    It’s not a menu until you actually add some links. I find it better if the whole cell is a link rather than just the text – how would you do this?

  164. Joe says:

    Very great and Detailed explanation, thanks alot

  165. Dan Vo says:

    If I want to add the second vertical menu on the right of the web page then how can I do that?

  166. verna says:

    i got it! thanks u very much!

  167. Sasi says:

    Devin� Your code is really useful to me… I have one query… I have created the menu plus one submenu in the first cell of the table. In the next cell I have embedded one flas picture. If I move upon the menu now, the submenu gets hided behind the flash… Is there any solution to this….

  168. verna says:

    nice teaching……… thank u for spending ur time for this tutorial

  169. lugene says:

    i learn a lot!!!

  170. ivan says:

    cool menu without javascript;)

  171. raj says:

    how to make more than 3 vertical drop down menus

  172. Jason Parker says:

    Perfect example, just what I was looking for, thank you :-)

  173. Bapi says:

    nice job dear, thanx

  174. Devin R. Olsen says:

    Walaka, English please :)

  175. frankp says:

    Devin. Outstanding work! I do have a problem on IE7. The third level reset only works once or twice when hovering over the first level. Then, when I hover over the first level again, the third level pops up, but with no links. Just the blue block. It then continues to do this until I refresh the page. Any hints? Thanks, frank.

  176. Josh says:

    Great menu Devin, Worked perfectly on ie6 for me

  177. Ram says:

    good job……… thanx

  178. Chad says:

    Absolutely fantastic tutorial. Thank you very much.

  179. Shabir Ali says:

    nice job dear. its excellent.

  180. Jeff says:

    Cheers Devin! A tweak here and there, and its exactly what I was after. Thanks again.

  181. johny says:

    I remove the height on css so that when I have a long title menu it will move on the next line.My only problem when I hover on the blank space on first level the second menu didn’t show but when I hover it on the menu title it works. I got this problem on IE 5.5 and 6.

  182. michael says:

    clean and simple, I appreciate the tutorial :-D

  183. Devin R. OLsen says:

    sandeep In order to make either horizontal or vertical menus to work you must read my \”CSS IE Hover Fix\” tutorial for IE5 and IE6.
    joney, you can download a copy of the cssHoverFix.htc at my \”CSS IE Hover Fix\” tutorial under tutorials pull out up top.

  184. sandeep says:

    hey devin thanks fot this script but dude your css not work on ie6.

    plz check it on ie6 and sent me revert back on my email id


  185. johny says:

    can you give the link whrere I can download the cssHoverFix.htc for IE.

  186. Devin R. Olsen says:

    Well thank you very much Josh. I have worked really hard at trying to provide only the basic fact here to my readers and will continue to do so. I know my updates to this site have slowed just a little due to work and another huge project I plan to release soon. With that said though I will be releasing a whole array of new tutorials here shortly, so stay tuned everyone.

  187. Josh says:

    Hello Devin. Think your website is excellent, one of the best tutroial website around the world. Great tutorials and excellent manner at explaining things. Keep up the good work All the best from Josh

  188. stevie says:

    nice tutorial.. simple but helpfull.. thx..

  189. Michielv says:

    Nice tutorial, really learned something out of it. thx great!

  190. buratinocc says:

    great tutorial ,thank you so much

  191. Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply to Yomi Adesoye