Pure CSS Horizontal Menu

Today I want to break down the steps of creating a pure CSS horizontal navigation menu. You see a lot of sites using them and while some are very creative, others are way off base as far as functionality is concerned. So without further ado, let’s begin to create a horizontal navigation menu.

Here is our blank document we will use and reference to throughout this tutorial:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Let’s start off by creating a container for our navigation by using a div box. I will give my div box an id of “navigation”, but you can name it whatever you like as long as it corresponds to our CSS that we will write here in a second.

<body>
	<div id="navigation"></div>
</body>

Ok now that we have a simple container for our navigation links, we can begin to add some style rules to it. In order to give style rules to our navigation, we will need to make a style area that will contain all of this tutorials CSS (For tutorial purposes, all styles are inline and not on an external stylesheet).

<head>
	<style type="text/css">

	</style>
</head>

Let’s now start styling our navigation container by giving it a width, height and background color.

<style type="text/css">
#navigation{
width:100%;
height:30px;
background-color:#999;
}
</style>

If you are unfamiliar with writing CSS, I strongly suggest you read up on some CSS basic tutorials.

So let’s look at what we have done to our container.

fig1

Nothing special looking yet, but we now have our container setup to move forward in creating our navigation menu.
Now let’s add our menu items to our navigation container by using the unordered list method. Go back to our navigation container and add the following.

<body>
<div id="navigation">
<ul>
	<li>Menu Item 1</li>
	<li>Menu Item 2</li>
	<li>Menu Item 3</li>
	<li>Menu Item 4</li>
</ul>
</div>
</body>

Here is what our navigation menu should look like now.

fig2

You might be wondering how this is going to be a horizontal menu when our list items are ordered like a vertical menu. Well we still need to create a few more rules and styles to turn our menu into a horizontal look.

Go back up to our CSS and add the following rules:

<style type="text/css">
#navigation{
width:100%;
height:30px;
background-color:#999;
}

#navigation ul
{}
#navigation ul li
{}
</style>

(#navigation ul) points to any <ul> in our navigation container.
(#navigation ul li) points to <li> in our navigation container that is a child of <ul>.

Now that we are directly pointing to our <ul> and <li>, lets add some property’s to these guys.
Add these styles to your two new rules:

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;}

What we have done here is we first told our <ul> to have a margin and padding to have a 0px.
We do this to remove any browser default margins and paddings that comes along with <ul> tags.

Next we point directly to our list-items and give them styles of display, height, float and list-style. The display and float styles are used align our list items in a horizontal fashion. We also set the height of each list item to 30px to match the height of our over all menu. Lastly is the list-style rule, we set it to none in-order to remove our browser default list-item bullets that come natively with the ordered/unordered lists.

fig3

Great! Now we are on track to creating a horizontal menu, but hmm it looks kind of bunched up. Its hard to tell where one menu item starts and another menu item ends.

To space out list items out, lets go back to our CSS rule for our <li> and add a left margin.

#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}

Here are our results.

fig4

Much better now, we can clearly see where each menu item starts and ends.

Let’s now turn our menu items into links by adding the following to your menu’s markup:

(We will not worry about where each item links to because this is out of the scope of this tutorial.)

        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
        </ul>

Here is the results of each list items text being wrapped around the anchor tag (<a></a>):

fig5

YIKES, that’s just plain ugly looking right?

First, our menu items now have a solid blue color that is standard for all links. Second, each link now has an underline decoration. It’s very common for links to be styled with something more suitable for your sites theme, rather then use browser default styles.

So how do we fix these two issues? We first point to these links in our see by setting up two new rules like so:

#navigation li a
{}

#navigation li a:hover
{}

Our second rule is a hover rule. Hover rules (pseudo selector) allows us to dictate when the underline should appear below our links.

Here are our rules with their new styles:

#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}

Now our links should have a white font color, but no underline if we are not hovering over them.
If we do hover over links though, then our links should receive a text decoration of underline.

Here are our results:

fig6

Our menu is looking great now, but you might be asking yourself. “Self, what if I want to have sub menu items? How would I go about creating something like that?”

Good question, let’s look at how we can create a sub menu’s for each menu item that is displayed only when a user hovers over our main menu items.

Let’s start to create our sub menu.

<ul>
      <li>sub menu item 1</li>
      <li>sub menu item 2</li>
      <li>sub menu item 3</li>
      <li>sub menu item 4</li>
</ul>

You now might be asking, “Where do we put this second unordered list of sub menu items?”. Well believe it or not we actually put it within each of our main menu items <li>.

Make your code look like the following.

<div id="navigation">
        <ul>
            <li>
            <a href="#">Menu Item 1</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li>
            <a href="#">Menu Item 2</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul> 
            </li>

            <li>
            <a href="#">Menu Item 3</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li>
            <a href="#">Menu Item 4</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>
        </ul>
    </div>

Let’s look at the results of adding our sub menu items to our overall menu:

fig7

YIKES AGAIN! What happen to our menu, it’s all messed up now? We still have to create a few more CSS rules to get the look we are trying to accomplish.

Before we begin to write our new CSS rules lets think about how the whole thing is set up as far as parent to child elements are concerned.

#navigation -> ul -> li -> ul -> li

We have our navigation container, and its list of menu items. In each menu list item we start another list of menu items. So we need to create CSS rules that point specifically to our sub menu items.

Add the following to your CSS:

#navigation li ul
{ }

#navigation li:hover ul
{ }

#navigation li li
{ }

Here we are setting up rules that say, “if our navigation container list item has a sub unordered list and list items in it, then use these CSS rules”. We are also set up a hover rule so when a user hovers over a first level list item, it will hide or display its child sub menu.

Add these styles to our new rules:

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}

We set our sub menu <ul> to have a display rule of none to hide our sub menu from the users.

Next we set a hover state to our main menu list items that says, “If a user hovers over any one of our main menu items, then indeed display it’s sub menu to the user”.

Finally we have to style our sub menu items to be listed in a vertical fashion, instead of following its parent’s rule of the horizontal look by setting them to be a display of list-item. Our sub menu items also need to have a width of 100%, this ensures that shorter combinations of link lengths under our fixed width of a sub menu, do not stack side by side, but rather always stack above and below each other.

Let’s see what our results look like now:

fig8

We in fact have our sub menu list items styled correctly, and our sub menu only displays when we hover its parent. The problem we now have, is that the sub menu is not being displayed directly under its hovered parent. We also have no background colors set for our sub menu, this makes it look a little weird and hard to read.

How do we fix these two issues? Well to position our sub menu correctly, we have to go back to our main menu list item’s rule we wrote a while back, and add a position property to it.

So make your main menu list item rule look like the following:

#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}

This is preparing our submenu to be positioned absolute, but relative to our main menu items. So now add the a another position style, but this time to our sub menu:

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
}

When giving an element a position absolute, you are breaking the element out of the flow of design and searches for a stopping point in its parents. (hence giving the first level list items a position relative)

We not only have to add a position of absolute to our sub menus, but also a left and top in order to stop the browser from trying to guess where to place our sub menus.

All this left rule is saying is that we want our sub menu to be position left by 0px, and top by 20px to our relatively positioned parent list item:

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px; top:20px;
}

We also wanted to fix our sub menu’s background color, so let’s add this and make it the same color as our main menu.

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999;
}

Let’s again take a look at our results.

fig9

Excellent, we have a great responding sub menu that pops up when you roll over our main menu items! But hey, how come our sub menu items have a font color of black, and they don’t have any text decoration? Well in short, we again need to wrap our sub menu items around anchor tags (<a></a>) and write our last CSS rules.

Make each sub menu’s markup look like the following:

<ul>
   <li><a href="#">sub menu item 1</a></li>
   <li><a href="#">sub menu item 2</a></li>
   <li><a href="#">sub menu item 3</a></li>
   <li><a href="#">sub menu item 4</a></li>
</ul>

And finally, add the following CSS rules and styles:

#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{text-decoration:underline;}

Here we are pointing specifically to our sub menu links, and saying “If a link is not being hovered, then have no text decoration, if it is being hovered though, then add a text decoration of underline”.

Here are our final results:

fig10

View The Working Example:

And that’s it folks! You have now created a pure horizontal CSS menu that has a pop out sub menus.

This method of a horizontal menu is both cross-browser friendly and also the best method for a SEO approach.

Enjoy! Devin R. Olsen

About Author:

I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

Follow Me:
TwitterFacebookGoogle Plus

287 Responses to “Pure CSS Horizontal Menu”

  1. danny says:

    A+ thanks!

  2. Evan D. says:

    Wow! A pure CSS menu that’s actually pure CSS (no javascript) and works on IE9! Can’t thank you enough.

    Here’s an additional quandry that I’m having trouble getting to work, and hopefully someone can help. I’d like the children list items of the parent to also display in a row underneath, starting at the left border of the page, and not resizing the parent item to the width of all the children items.

    Like this:
    ————————————
    | APPLES | POTATO CHIPS | SAUSAGES |
    ———- ———————————-
    | Dill Pickle | BBQ | Ketchup | Salt & Vinegar | Regular |
    ———————————————————-

    I can get them in a row underneath fine, but they display from the parent’s left margin, and resize the parent’s width to the width of the child row.

  3. Tim says:

    Many thanks for tutorial…it’s very helpful for me.

  4. Mattes says:

    thanks! best explanaition on this topic!

  5. susheel rawat says:

    thanks a lot, its working properly

  6. Bribeasy says:

    Awesome tutorial, thank you very much. Even a CSS n00b had it up, running and customised in no time at all. Now to check out the rest of your guides and see where I’m going wrong……

  7. Graham Bonham says:

    Very useful to have explained, step by step, what each bit of CSS code does.

    The end result is not usable for me because, I have one of the issues which Anton Treuenfels commented on on 6 August 2011: some lines of the sub-menu show one item and some show two or more, depending on how many will fit.

    I have not noticed this issue addressed in a reply. I find it a little difficult to follow the threads in the list of replies because replies are not listed rigidly in chronological order, although the general trend seems to be from earliest to latest. It crosses my mind whether this could be a time zone thing. I don’t recall whether I saw items really majorly out of sequence.

    It does seem counterintuitive to me that text formatted as a list would not display one item per line (though, on further thought, that is far from unheard of: your code uses display:inline). I would welcome confirmation whether or not failing to get one submenu item per line is an issue with your code (assuming a recent version of a mainstream browser (Internet Explorer, Firefox, Chrome, Safari or Opera) is being used). It’s possible I have inadvertently not entered the code correctly in some respect (or have made what I see as a minor tweak which has in fact broken it).

    One change I’ve made deliberately is that in #navigation li ul I specified left:-3px; rather than left:0px; for the left position of the submenu, making the text of the submenu more aligned with the text of the main menu and addressing my tendency to miss the submenu when moving the pointer downwards imprecisely. Another change I made was to specify a font applicable to the main menu and submenu, which were by default different in IE9 and Firefox 10, resulting not only in a very noticeable difference in appearance but also in some submenu entries fitting in the width specified when viewed in Firefox but not fitting when viewed in IE9.

    I’ll try entering it again, following it exactly. I’ll also try your infinite submenu version to see whether or not that copes nicely with different length submenu items. The initial appearance of the infinite submenu version is not to my taste but, if it copes well with different length submenu entries, I’ll try to adapt it to make it more pleasing to my eye.

    Your reply on 24 September 2011 re a different problem about a submenu being hidden when a user moves off the main menu to try to select from it was useful. Now I understand why the submenu overlaps the main menu. One of the websites I visit frequently (http://www.absp.org.uk) has this problem of submenus usually disappearing (whilst using IE8 or IE9) when one tries to select from them. With perseverance one can eventually get on to submenus. The problem goes away on using Internet Explorer’s Compatibility View.I might look and see if I can see whether that site is missing a needed overlap between main menu and submenu.

    I note your copyright notice at the foot of your webpage. I would guess that that might be intended to address unauthorised wholesale copying of your website’s structure and unauthorised republication of commentary rather than reuse of code from your posts and tutorials. However, I am unsure of your attitude to the latter. I think I recall you telling someone they could use code in return for linking to your webpage or a specific tutorial. Do you have a general position on reuse and adaptation of code from your posts and tutorials? No reuse or adaptation without specific permission? Unrestricted reuse or adaptation without specific permission? Distinction between personal and business use? I had a look around your site but didn’t spot text which set out your position.

    Finally, trivially, I noticed a minor error in the text of the tutorial – see starred text below.

    Our menu is looking great now, but you might be asking yourself***. “Self,*** what if I want to have sub menu items?

    Thank you very much for a very helpful website.

  8. ben says:

    such a fabulous tutorial. Thank you so much for the easy to follow explanation.

  9. Andy says:

    Great tutorial – My current website uses an Adobe Spry for horizontal menus. Devin’s solution is much cleaner (no javascript). I plan to extend my site to support desktops, tablets, and smart phones. To do this I am using an external style sheet with the following content:
    /* Desktop & Tablet */
    @import url(“Horiz.css”) only screen and (min-width:321px);

    /* Phone */
    @import url(“Vert.css”) only screen and (max-width:320px);

    The Horiz.css & Vert.css files were extracted from the 2 tutorials.
    I only need to modify Horiz.css to handle multiple levels.

  10. Andrzej says:

    Dear Devin,

    your tutorial is a great!

    however – I’m trying to add sub-sub-menu and it’s still visible with sub-menu. Can you explain step-by-step how to “hide” it untill its been clickin on?

    I tried to do this according your comment (http://www.devinrolsen.com/pure-css-horizontal-menu/#comment-112)

    made a new rules (copy from 2nd level)
    but I don’t understand what to do with:

    The only other changes would have to be in the new sub level rule \”#navigation li li ul\” where you would want to adjust the top and left rules to your desired results.
    Lastly don’t forget to add a new sub level unordered list in our structure where you desire a second sub level menu.

    Thanks in advance

  11. Np says:

    Really Liked it.Simple and power ful

  12. thank you very much I am real interested in this tutorial and i am sure every one interested in this tuitorial

  13. manasvi says:

    too good.. awesome… thanks a ton!!

  14. manasvi says:

    superb, lovely and awesome… thanks a lot!!!

  15. Ravi says:

    Thank you very much this tutorial. It’s be very helpful for me.

  16. B says:

    Thanks a bunch! Saved me from tearing my hair out!

  17. Athias Avians says:

    This is wonderful. You are full of abilities to guide. Thanks so much. I am now happy and confident.

  18. Lord Jaguar says:

    Hey,

    Great tutorial. You wrote in way back in 2009 and people still come looking for it :-) That shows how important a topic you chose to blog on.

    Keep up the good work.

    thanks !

  19. Haunteddoc says:

    Best tutorial on horizontal menus I have found. Love the humor! The explainations are clear and the flow of the tutorial makes it easy to understand.

  20. sharad says:

    Hello Devin
    this is very good tutorial but i had a problem in sub menu list where you give a width 160px if i increase the width then if text is small its shown in same line.Please help me
    Example:if subcategory text is 123123is give in the same line hope you understand the problem.
    Thanks in advance

  21. Satnam Singh says:

    really helpful article .. Thanks a lot Mr. Devin R. Olsen

  22. Sallie Hutchinson says:

    Thank you soooo much for the wonderful tutorial. It is one of the best well written tutorials I’ve had the chance to read. It was a great help to me. I’ll be back and I’ll pass your url on to my fellow students in my programming classes.

  23. Leah says:

    Thanks. Really helped me creating my navigation bar exactly as yours

  24. divia says:

    Thanks, great article and easy to follow.

  25. Cosmos Pham says:

    Thank you. This tut is very helpful.

  26. daljit says:

    Thanks you this is the first time I learnt to create navigation menu.

    Thanks.

  27. HTML and CSS learner says:

    wow i really love this site and the way of teaching is awesome

    thank you very much

  28. Sara says:

    I have added 2nd and 3rd level of rules as per your additional coding above and they are all positioned correctly. However, I need to play about with the hover I think. I only want the 2nd and 3rd level to appear when you hover over its parent list item. At the moment the whole lot of them appear when I hover over the top level list item. Please help! Thanks.

  29. mridul says:

    its fantastic, thanks for very usefull tutorial

  30. Tkaty says:

    Thanks Devin! you have made my day! have been looking for these steps for creating a horizontal menu till I got so frustrated, and fortunately I landed on this wonderful tutorial after a long search! Thanks big!

  31. Adam says:

    Hi Devin, I am having a little trouble with my sub navigation. My main nav tabs have individual background colors for each tab. I was trying to get a horizontal sub nav with the background color to it’s corresponding tab and having the color span across the width of my container. Right now when mousing over the main navigation the sub appears but all other tabs on the main navigation are pushed over far right to the width of the sub navigation (if that makes sense). Any tab on the main navigation that doesn’t fit within the container is now pushed down a row and covering the sub nav. My head hurts from all this thinking and explaining, any help would be appreciated. I can email you source and css if needed. Thanks!

    • @Adam, I know exactly what you are talking about. Sounds like you have removed the position absolute from your sub menu’s ul element. Put the position absolute back onto the sub nav’s ul element. Then instead of giving this sub menu’s parent (li) element a position relative, remove it and give the first level ul element the position absolute.

      This will ensure that the submenu will break out of the flow of design when hovered all the way up to the top level ul element and stop. Thus not pushing any top level menu items out of the way. From here, you can play with the positioned absolute element’s top and left styles to offset it where you want when hovered.

      Just remember that position absolute elements want to break out of the flow of design all the way up to body unless told where to stop with a position relative on a wrapping element. Having your sub menus breaking out of the flow of design up to the top ul element (instead of the immediate parent li element) is what you are after.

      Hope this helps.

  32. Breanna says:

    Hi Devin,

    Followed the tutorial and I added a few colour, font and margin changes and have it working perfectly. My only concern now is I want to create a “current” state when the primary component of the navigation is clicked on. Can you please walk me through doing this?

    I also wanted to know if anyone knew how to change the text colour in the sub-menu to be different to that in the primary navigation bar? Have tried everything and it just doesn’t work.

    Great tutorial btw!

    Thanks!

  33. 100 Great CSS Menu Tutorials | Designer Malaysia says:

    [...] 38. Pure CSS Horizontal Menu [...]

  34. Julio Gomes says:

    Very, very good!
    Step-by-step concise and didactic.
    Congratulations!

  35. Kim says:

    One the absolute best tutorials I have followed. Very well written and explained. THANK YOU!

  36. Will says:

    simply, Thank you!

    I have a reasonable understanding of both HTML and CSS, this has bugged me for over a week. Your tutorial is exactly what I needed it now works!

    again, Thank you!

  37. Gunjan says:

    Thanks Devin! That indeed was the issue. After removing the gap between the main menu & its sub menu, its working like charm! :)

  38. Gunjan says:

    I created the horizontal menu and vertical submenu with the help of your tutorial. But, somehow, my submenu disappears as soon as I try to hover on it. Could you please let me know what could be the reason? I am using IE9.

    Thanks!

    • @Gunjan – It sounds like you have a gap between your sub menu and list item you hover to expose it. If you have a gap between top level list item and its nested sub menu, then when you go to hover the sub menu your mouse will actually be leaving the the top level list item and your sub menu will be hidden again.

      Try to move the sub menu up so there is not a gap, or maybe even a little overlap so your mouse does not lose focus of the sub menu.

      Other than this, no I can’t help you with out seeing the code.

  39. Jim says:

    Devin-
    One of the BEST tutorials – extremely well-written thanks so much.
    One issue I’ve been facing and can’t seem to find the answer for: The BIG WHITE BOX that is needed for the sub-menu area – is there a way to make it transparent somehow? Having trouble finding this instruction on other sites and figured you were da-man!
    Thanx

    • @Jim – Certainly there are a number of methods to give this element opacity.:

      - opacity:0.5; becareful with this one, it will not only give the element a 50% opacity level, but also it’s nested children. Also this is CSS3, so not all browser versions will support it and or will need browser specific prefixes (-moz,-webkit,-khtml,-ms) infront of opacity:;.

      - background:rgba(0,0,0,.5); RGBa is a way to set both the background color, and declare it’s opacity level (This will not give opacity to nested children). This too is CSS3.

      - background:url(image.png) repeat; You can always use a 1px by 1px image that has opacity saved into it (PNG 24bit file format) as the element’s background, but please note that alpha transparency in PNG 24bit is not supported in IE6, unless you use this tool to convert from 24bit to 8bit http://www.8bitalpha.com (reduces files size with no lossy, unlike photoshop’s 8bit version). This is just good old CSS and will work in almost all browsers and versions.

      Pick your poison.

  40. Ayensu James Hector says:

    I really enjoyed your tutorials. I have been struggling to design a horizontal menu with a drop down in a website i am developing. Thank you very much. I might need more tutorials on CSS

  41. Unknown says:

    splendid, great, wonderful tutorial.. ^_^

  42. Sarah says:

    Wow!! Thanks so much for putting this tutorial up…
    The best I have come across and I do a lot of researching.

    Perfect…website is not live yet for viewing what this awesome tutorial created, along with the css i already had. The implementation of both created an amazing outcome. A gorgeous neat horizontal instead of vertical. Sits perfectly right across the top of home page slider.

    More than happy to pass on the coding of my final outcome.
    Awesome!!

  43. Sum says:

    Thank you for this excellent tutorial. I’ve been struggling to make sub menus and your tutorial has really helped. I do like how you explained each section step by step which makes the tutorial easy to follow. Thank you for this useful tutorial…

  44. uma says:

    Thanks, It is working. i searched lot of sites.but this is useful for me as a beginner of creating menu with css. it is simple to understand.

  45. Sunny says:

    Thank you for the tutorial, it is to point, easy to follow and very helpful.

  46. Luizmash says:

    I have been searching for a nice tutorial and guess what, on a scale of 1 – 10, I would give you 9. because u r hum an ofcourse and you aint perfect. Great work anyway. Your explanation makes is final. I don’t have to search again.

  47. ganganarsaiah says:

    i have been searching all around for a tutorial to teach me how to do a horizontal menu correctly without any issues. Yours was the only one that worked for me.
    Thanks a million.

  48. Paul says:

    You are awesome. Thank you so much for this fantastic tutorial.

  49. [...] 38. Pure CSS Horizontal Menu [...]

  50. Jon Tadeu says:

    Wonderful tutorial Devin!
    The only part where I got stumped was on the submenu. But that was due to my own stupidity. I did not realize that the second UL had to be before the that contained it.
    Just mentioning this embarrassing bit, in case anyone else has the same problem I did.

  51. Edith says:

    Thanks again, this is great, and my problem is solved….it looks amazing

  52. Edith says:

    Awsome menu, first I had some problems to get everything right.
    The only problem I have right now is that I can’t ad a new submenu item. The fourth one apears after the third one when I want to see an example. Any idea how I solve this problem?

  53. Donald Kerr says:

    Devin,

    In your message to Cat re horizontal sub menus, you wrote:

    “* Forth Change the width:160px; to width:100%; in your #navigation li:hover ul.”

    For me, I have to give the width a pixel value otherwise the sub menus remain narrow. “Width:100%;” seems to have no affect.

    I can certainly live with that as I have only one sub menu and I know the width that it should be. Can you offer any advice for others who may be experiencing the same issue?

    Fantastic example and great work once again.

    Donald

  54. mania says:

    Hi Devin,

    Thanks a lot for this tutorial. Keep up the good work.

  55. Anton Treuenfels says:

    I love the step-by-step explanation of what’s going on, something that’s missing from most other CSS menu tutorials/demos I’ve come across so far.

    I followed the tutorial using IE9 but substituting actual menu items for your generics taken from an old website (state-of-the-art for 1995! Well, at least that’s what the reference book used to create it was dated…). Specifically, the top-level menu items were \”A\”, \”B\”, \”C\”, etc., and the sub-menus contained items starting with that letter.

    Everything matched your tutorial up to adding the CSS rules for the sub-menu. However the \”width\” attribute of the rule \”navigation li:hover ul\” caused separation of the top-level menu items. Ie., \”A B C…X Y Z\” became \”A B C…X Y Z\” when hovering over \”A\”. It snapped back when the pointer was moved away. Also some of the sub-menus were highly unstable (rapidly flashing, in fact).

    I tried a number of experiments at this point but the behavior never changed.

    What did seem to fix it were your additional positioning rules in the next section, to locate the sub-menus relative to their parents. The separation issue went away and the sub-menus became stable.

    However…the sub-menus do not display their items in a single column, despite the \”display: list-item;\” rule. Each item can be highlighted individually, but some lines of the sub-menu show one item and some show two or more, depending on how many will fit whatever width I specify (which has to be at least wide enough to handle the longest sub-menu item without wrapping it).

    It’s workable, but not exactly what I was hoping for.

    Other comments:

    - I notice many advocate hiding a sub-menu by positioning it off-screen rather than using a \”display: none\” rule. Is there a reason you prefer this?

    - when a sub-menu is displayed and the pointer moved into it, the highlight goes away from the top-level menu item that controls it. Is there a way to keep it on so that it appears connected to the sub-menu? I should probably mention that I did not use the underline text decoration when hovering over links, but rather reversed the text and background colors (ie., white text on gray background becomes gray text on white background. Much easier to see for single letter menu items, at any rate).

    - I tried the changes you made in an old comment here to lay out the sub-menu horizontally instead of vertically. I like the look quite a bit, but it does seem harder to keep the pointer within that single line as it’s moved from end to end. Hmm, what if I make the box bigger…?

    - I tend to use relative instead of absolute measurements (eg., \”em\” instead of \”px\”. I noticed the vertical sub-menu seemed to have the same vertical spacing between items as the height of the top-level menu, which I attributed to inheiritance. I added a shorter height to the “\#navigation li li\” rule and it seemed to look a bit better.

  56. Mohamed Asif says:

    Hai “devinrolsen” . I Get Lot Of Confusion While Studying other Websites . .
    It’s Seems Very Simple & Effective.
    Its Very Useful To Me..

    Thanks A Lot

    Regard’s
    moahmed Asif

  57. Karen Smith says:

    I have looked at a lot of tutorials for horizontal nav menus, but this is the first one that has actually worked for me. Thanks for taking the time to explain and illustrate in such detail. I’ll be back to look at your other tutorials.

  58. Tharangai says:

    hi

    i just started web design. so your tutorial is very useful. i did it works. so i wanted to make sub menu also horizontal. that is great full if u can help me how to do that

    Thank you very much

  59. Refly says:

    Nice article! Might want to update (or write another one) that use CSS3 to add animation effect.

  60. RK says:

    It helped me to fix my submeu CSS issue in MVC3.

    Thanks a lot!

  61. ahyar says:

    I try your code above but doesn’t work, please help me.

  62. Matt says:

    I couldn’t figure out why mine didn’t work and yours did until now. I clicked on view source and copied and pasted your code into a new HTML file and it worked. So I went through line by line and all my stuff was the same.

    So, here’s the kicker: If I didn’t have this:

    ..in front of the opening HTML tag like you did, it didn’t work. So, I added that in front of my HTML tag and mine worked.

    Does anyone know why? I’m using Internet Explorer 8 by the way.

    Thanks!

  63. prakash says:

    Thanks sir your post is very usefull.

  64. Robert says:

    A very clear and well written tutorial.
    Thanks a lot, it has helped me heaps.

  65. Badminton says:

    Very well written tutorial. Clear, simplified, and concise. Thank you!

  66. Matt says:

    Devin,
    Thank you so much for this tutorial. I’m a hobbyist developer and I have been looking and looking for a tutorial that builds up through a proper chronology with explanations like this. I really appreciate it.

    Menu logic has been something that has eluded me until now. I feel like I had all these puzzle pieces understood but couldn’t turn them into a picture and now I can.

    Thank you a thousand times!

    Matt

  67. Lavina says:

    My problem solved. It’s the height and padding. Now everything works perfect. Thanks Devin. This is the greatest tutorial I have ever seen. Thanks!

  68. Lavina says:

    This is a great tutorial. Everything works fine except I cannot click on the submenu. When I move my mouse over the main menu, the submenu shows, but if I try to click on it, it’s gone. Any help?

    Thanks!

  69. Michael McGrath says:

    Terrific, simple solution – the one that I have been seeking on-and-off for quite some time! It is quick to implement and makes a good Flash nav replacement for @#$%! iPhone / iPad redirects, of course without the animation. Thanks very much!

  70. kyawswarthant says:

    nice post! thanks….Devin R. Olsen

  71. David says:

    Hi Devin,

    Thank you very much for the CSS tutorial on drop-down menus. Its actually the first one that really works on my blog. I would appreciate your help with a novice question: ie. how can I create more space between my header and my post, and is there a better way to make my header look more centered?

    Thanks for whatever help you can provide!

    David.

  72. S kumar says:

    hi devin! its great. keep it up……….

  73. Joe St.Onge says:

    Thanks so much for a wonderful tutorial! As someone just starting out with CSS and HTML, I found it quite easy to follow and understand! and with great results!
    Thanks again!

  74. David S says:

    When I tested this out I noticed that the “position: relative” used in the “#navigation ul li {}” doesn’t seem to register? I tested this across all browsers and completed the tutorial twice, just to make sure I didn’t miss anything. Did nobody else experience this sort of problem? If I use firebug (in firefox), I could see that the ‘position: relative;” attribute wasn’t even listed in there? Just wondering why that may be happening? Thoughts? Thanks.

  75. Mohamed says:

    It does not work in Internet Explorer.

  76. Liz Lantz says:

    This was so helpful and well explained – THANK YOU!

  77. Samey says:

    Thanx For This Great info I Was Looking For This Created it on worldfree4u.com

    Please Is there Any IE Fix For This Horizontal Menu Sub Menus Are Not Appearing In IE6..

    If There Any Fix Please Let Know at

    kailashkumarbti@gmail.com

    Thanx
    Samey..

  78. Linda says:

    I looked far and wide for CSS-only navigation with sub-menus, and I just happened to find this after I’d tried so many others that I couldn’t get to work (not enough tutorial with the code). This was wonderful!! Thanks so much…

  79. Greg L says:

    I am a fairly novice HTML/CSS developer. I have used CSS files (vs. embedded CSS). (I hope I am using the right terminology.) I just favor the CSS files. But I am having a heckuva time converting this into a CSS file using classes (vs. IDs). It’s probably too much to ask but I would welcome help on that.

    Also I thought the step-by-step tutorial was outstanding. Thanks.

  80. shae says:

    Thanks for the tut, I really appreciate it.

  81. Hey thanks for the tutorial. So many horizontal drop down menus claiming to be pure css, but when you look, there’s a tiny bit of JS here or there. I took your example and added some flare to it. It can be seen here http://bin.cakephp.org/view/2043497151

    Thanks Again!

  82. Bryan says:

    @Devin @Chis – Giving a higher z-index worked for IE8 and Chrome but I’m still having an issue with IE7 where the submenu items go behind my content (like, images) below it. Any ideas? Thanks in advance.

  83. Philip says:

    Super walk-through, thanks!

    I would like the sub menus to appear on a horizontal line above the nav bar. But I am not able to do this by applying the display:inline to the #navigation li ul. What am i missing?

    Thanks for your help
    Philip

  84. Danny says:

    Great post. Really love how you walked through the building of the menu. Question – how would you have the submenu be horizontal as well – still only using CSS/HTML?

  85. adam says:

    Thanks for your good information.

  86. Amelia says:

    Thank you so very much for your easy to understand tutorial

  87. Chris says:

    I am having an issue where the submenu items go behind my content below it. I know it has to do with the positioning. Anyone know of a fix for this?

    • @Chris – This has to do with a z-index issue. Either give your submenu a higher z-index, or give your content area a position:relative with z-index that is lower than your submenu.

      This should make the submenu always be on top of the content area.

  88. I created a similar menu but with a horizontal submenu. It works great in everything except IE and I’m having trouble getting the main menu item to stay highlighted when viewing its submenu. Would you be able to offer insight?

    Thank you!

  89. Ed says:

    great tutorial. I have managed to get this to work on my site though I am using an image sprite instead. how can I achieve an ‘onclick’ style effect with CSS so that when someone clicks on a button, the button image changes?

    thanks,

  90. InTheLittleWood says:

    How do I keep the menu button in it’s hover state whilst browsing its submenu?

    E.g. News > News 1 | News 2 | News 3

    News goes back to regular state.

    :)

  91. Vicki says:

    This is an excellent tutorial. The only problem I have is that the sub menu disappears in IE7 before a nav button can be clicked on. Do you have a fix for this?

  92. gtagamer says:

    You save my project thanks a lot bro.

  93. MohanrajMani says:

    Really, it’s nice and thanks for this and upcoming information. I loved it

  94. jim says:

    Very helpful. Made more sense to me than any other tutorials I’ve seen on Horizontal CSS menus so far.

  95. Vinay says:

    Hi Devin,
    I think its not working on IE8. Do you have a link to download your code ? I wanted to check if I have made any errors.

  96. Muhammad Ahmed says:

    This is very helpful; but waiting for creating sub menu’s upto multiple levels

  97. Alex Genadinik says:

    This is very good – I followed the whole thing and learned a lot. Exactly what I needed :) Thank you!

  98. [...] be found here. Please read this pseudo-hover fix tutorial if you are trying to get this or even the Pure CSS Horizontal Menu to work in older versions of [...]

  99. Venkat says:

    Excellent rare to c this type of codes it is very helpful for me as a beingeer

  100. Koja says:

    10x man great tutorial!

  101. SaseeDharan says:

    thanx great tutorial it is..

  102. SaseeDharan says:

    I am a beginner to CSS you horizontal navigation tutorial is very helpfull..thanx a lot..

  103. Isuru Sanjana says:

    Thanks a lot this is good one.

  104. aina says:

    Great tutorial!!!

  105. cihip says:

    Pure CSS Horizontal Menu post for thanx.

  106. Raj says:

    I just want to say that really cool stuf and the best part is the way you explained!! great workkk! Thanks a lot!!

  107. Love your tutorial. Simple to play with … ☺
    Thank you very much!

  108. Devin,

    I have spent MANY hours trying to get a good css nested menu tutorial and finally I have found yours. Thank you!

    One question: If I want to center the menu, what is the rule for that?

    Thanks.
    ps: Hope you will find it in your heart to also give us a horizontal nested menu that is pop-up rather than drop-down.

  109. computer programming tutorials says:

    Very very informative tutorials.

  110. Kyle says:

    Hi Dev,

    I’ve made the changes you suggested but I’m having the same result. Thanks for taking time to look at it!

  111. @Kyle – Line 38 of your main.css (#nav ul li) you forgot to add a “position:relative;”. Next line 41 of main.css (#nav li ul) set the following to “top:14px; left:0px;”.

    Seems you forgot to set the parent element of your sub menus to be positioned relative so you may position your sub menus relatively to your menu items vs. the entire menu its self.

    Let me know if this fixes or helps the issue.

  112. Kyle says:

    Hi Dev,

    Here’s the link.
    shymangoo.freetzi.com/1.html

    thanks!

  113. @Kyle – I would need a link to further investigate this issue.

  114. Kyle says:

    Hi Devin,

    I do have a slight problem with IE7, when I try to zoom in to at least 110%, the top-level menu items gets “squeezed”, it looks like they ignored their assigned padding. Works great with all other browsers. Any thoughts?

    PS: Love all of yer tutorials! More Power!

  115. Fernando Illas says:

    Thanks for the article it was really helpful to me

  116. Electric cigarette says:

    This really is a terrific article, but I was questioning how do I subscribe towards the RSS feed?

  117. adrian – I can’t believe I am still answering this question. Look about 4 or 5 lines above these comments where it says:

    (NOTE!!! This Tutorial Has An Update In Order To Support IE5.5 and IE6 with pseudo CSS hover states)..

    It also states this at the very top of the tutorial, so I cant help but think that you didn’t even read the tutorial.

  118. adrian says:

    hi. it seems that your menu have a bug in IE 6, when you hover a li no drop-down menu. hope you`ll fix it. thank you.

    • Roger says:

      adrian – I think it would be more accurate to say that IE 6 has a bug. Fortunately, hardly anybody uses IE6 anymore, so we can forget about “problems” like this.

  119. Jason Gonzalez says:

    I have been searching all around for a tutorial to teach me how to do a horizontal menu correctly without any issues. Yours was the only one that worked for me.

    Thanks a million.

  120. ramesh says:

    thanx…i can solve my problem

  121. Matt says:

    Devin,

    Great tutorial and implementation but I notice that IE 7 intends the first menu button about 5 pixels in as compared to the others where the drop down menu is flush with the button. I updated the code to fix for hover status. What’s going on,

    Thanks Matt

  122. Leonardi says:

    Great tutorial, thank you very much

  123. David says:

    hello devin,

    i am a css beginner and i did your tutorial for horizontal menu (and i did it), but after success with basic navigation i try to do navigation with submenu and i didn’t make it.

    i am sending to you my code and if you can tell me where is a mistake:

    #navigation
    {width:100%; height:30px; background-color:#999;}

    #navigation ul
    {margin:0px; padding:0px;}

    #navigation ul li
    {display:inline; height:30px; float:left; list-style:none; margin-left:15px; position:relative;}

    #navigation li a
    {color:#fff; text-decoration:none;}

    #navigation li a:hover
    {color:#fff; text-decoration:underline;}

    #navigation li ul
    {margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999;}

    #navigation li:hover ul
    {display:block; width:160px;}

    #navigation li li
    {list-style:none; display:list-item;}

    #navigation li li a
    {color:#fff; text-decoration:none;}

    #navigation li li a:hover
    {color:#fff; text-decoration:underline;}

    /* ———————————————-podmeni———————————————-*/
    #navigation li li ul
    {margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999;}

    #navigation li li:hover ul
    {display:block; width:160px;}

    #navigation li li li
    {list-style:none; display:list-item;}

    #navigation li li li a
    {color:#fff; text-decoration:none;}

    #navigation li li li a:hover
    {color:#fff; text-decoration:underline;}
    /* ———————————————-podmeni———————————————-*/

    Menu Item 1

    sub sub menu item 1

    sub-sub menu item 1
    sub-sub menu item 2

    sub menu item 2

    Menu Item 2

  124. Hello

    keep to thank you for the explanation. Unfortunately we had a problem.
    Chear if the menu bar has 6 buttons, submenu buttons appear at all in 1 button. What can be? I added here and CSS code for verification.

    #header .nav { width:100%; overflow:hidden;}
    #header .nav li { display:inline;}
    #header .nav -> ul -> li -> ul -> li
    #header .nav li ul{ margin:0px;
    padding:0px;
    display:none;
    }
    #header .nav li:hover ul{ display:block;
    width:160px;
    }
    #header .nav li li{ list-style:none;
    display:list-item;
    }
    #header .nav ul li
    {
    display:inline;
    height:50px;
    float:left;
    list-style:none;
    margin-left:141px;

    position:relative;
    }
    #header .nav li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    position:absolute;
    }
    #header .nav li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    position:absolute;
    left:0px;
    top:50px;

    }
    #header .nav li ul
    {
    margin:0px;
    padding:0px;
    display:none;
    position:absolute;
    left:0px;
    top:50px;

    }

    #header .nav li a { display:block; float:left; background:url(images/nav-bg.png) no-repeat left top; width:141px; height:50px; text-align:center; font-size:1.17em; line-height:50px; margin-right:-1px; color:#fff; text-decoration:none;}
    #header .nav li a:hover { color:#f99933;}
    #header .nav li a.current { color:#f99933;}
    #header .nav li li a { display:block; float:left; background:url(images/nav-bg.png) no-repeat left top; width:141px; height:50px; text-align:center; font-size:1.17em; line-height:50px; margin-right:-1px; color:#fff; text-decoration:none;}
    #header .nav li li a:hover { color:#f99933;}

  125. Otto Tatsumi says:

    The navigation menu on mine require alot of spacing and therefore a gap is created between the parent menu and the sub menu. When the 30px gap is there, i cannot keep hovering to the sub menu. when there is roughly 15px gap, the menu works. Is there a way to go around that and still keep the spacing? It would look weird if I lowered the spacing to anything less than 30. thanks.

    student.seas.gwu.edu/~ottobahn/test.html

  126. Syk says:

    Hello Devin R. Olsen!
    I’m having great difficulties in making submenu with submenu. I’ve tried to do it at least 4 times without any success.
    The second point is that I’m having rows with different length. It wraps text together and 2 ‘s goes together on one line. Can you please give a solution for that.
    I really appreciate your work!

  127. indialike says:

    This is really very good Site… Thanks

  128. Vijay says:

    Great Tutorial. I have been looking for something like this for almost a week.

    I am looking for the sub-navigation menu horizontal instead of vertical. Also, I want the sub-navigation horizontal menu to be displayed all the time either when I hover the top menu items or when I click on one of the top menu items.

    I am looking for menu to behave like web sites abcnews.com or charlotteObserver.com. Also do you know how to get the same gradient colors.

    I greatly appreciate your help. I have spent almost a week with out any success to create menu’s like abcnews.com or charlotteObserver.com

  129. Man I love the codes, it worked perfectly.

  130. Hi Carl D.

    Sounds to me like you have not set your sub menus to have a position of absolute, or your first level “li” elements dont have a position of relative.

    Note when ever you use a position of absolute on any element you are breaking the element out of the flow of design and structure. (Hence your sub menus falling to the far left always).

    As stated above in order to fix any positioned absolute element from breaking out of the flow of the layout you must always give its parent element a position of relative.

    I hope this helps some bud. Please also view the source of the demo it will show you what I am referring to.

  131. Mike says:

    Great tutorial but the comment section is wicked annoying. Every time I try to read comment 41, comment 42 pushes it out of the way.

  132. Carl D says:

    Hello Devin,

    I’ve tried and tried to make this work, but each submenu displays horizontally, pushing the rest of the main menu to the right. I’ve no idea why. I tried it in BBEditor as well as DW and they both do the same. Any ideas what I need to do to make the submenu appear as a vertical list?

    Thank.

    Cheers

    Carl

  133. Handipa says:

    Hi Devin,

    I am a beginner in web design your tutorial is greatly helpfull. Thank you.

    HLM

  134. Tamesh says:

    this is very nice tutorial, but it’s working fine in IE7 and mozila, but working in IE6, is there any possibilities to without behaviou.htc file for IE6

  135. Alex says:

    seems it doesn’t work in IE, though works perfect in mozilla

  136. Pamela says:

    Thanks for taking the time to post this, Devin. I am new to coding but your explanations make sense and I got it to work!

  137. Daryl Musashi says:

    Sorry, that should be \”the < -L-I->‘s show up on 1 line rather then 2\” (I wasn’t expecting the HTML within the post to get read, my fault)

  138. Daryl Musashi says:

    Just did some more digging and it is indeed the #navigation li:hover ul{width:160px}. It seems that if you have multiple menu items that don’t reach the maximum width, the ‘s show up on 1 line rather then 2.

  139. Daryl Musashi says:

    Great Tutorial. Just 1 glitch. Have a sub menu that rather then displaying from top to bottom displays side by side (even though all my other menus display top to bottom like I want). I think it has something to do with the width? Any ideas why it wouldn’t work?

  140. Devin R. Olsen says:

    @Shubhank, please be note that to make this horizontal menu work in versions IE5 and IE6 you must use the tutorial up date link at the bottom of the tutorial. In order to bring pseudo hover behavior to these two browser you must use the pseudo hover fix t

  141. Shubhank says:

    Excellent Code , But only one problem is that\” this code is running in fireforx but not in IE\”

  142. Evelyn says:

    Hi Olsen – I really appreciate your nice work. Just a request- is there any way you can come up with a tutorial for this comments/post (just like the one I am using to contact you) displayed on your website. I think this is the easiest and best posting site I have seen.

  143. marlagrodem1@aol.com says:

    Solve it…. Your tutorial gives each of the building blocks .. so I was able to fiqure out that IE, FF, use text-align center and Safari used margin left … so a quick change to margin left … and my submenus are fine thank you again for a wonderful tutorial

  144. marlagrodem1@aol.com says:

    This is the best tutorial. I’ve erased my DW CS3 Spry widgets
    and will create my horizontal menu bars ALWAYS with this method. I have one slight problemo … in Safari the list items are right justified even though I’ve called for text to be centered which it is in IE, FF, and Chrome.
    Suggestions ?
    http://smokeymountaincabinets.com
    here is my navigation info which is called in an external style sheet
    #navigation{
    width:890px;
    height:30px;
    font-size: .9em;
    font-family: Calibria, Verdana, Arial, san-serif;
    text-align:center;
    color: #ffffff;
    background-color: #240055;
    }

    #navigation ul
    {
    margin:0px;
    padding:0px;
    border: 1px solid #CCC;
    }

    #navigation ul li
    {
    display:inline;
    height:30px;
    width:120px;
    float:right;
    list-style:none;
    margin-left:45px;
    position:relative;

    }
    #navigation li a
    {color:#fff; text-decoration:none;}

    #navigation li a:hover
    {color:#ff8040; text-decoration:none;}

    #navigation li ul
    {
    margin:0px;
    padding:0px;
    width:120px;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color: #240055;
    }

    #navigation li:hover ul
    {
    display:block;
    width:120px;
    }

    #navigation li li
    {
    list-style:none;
    display:list-item;
    }

    #navigation li li a
    {color:#ffffff; text-decoration:none;}

    #navigation li li a:hover
    {color:#ff8040; text-decoration:none;}

  145. Stefan - bulgaria says:

    Thanks a lot! I’ve just waste 1 hour of searching your simple navigation menu over the internet and suddenly find it on YOUR web site! And best of all is that code is written simple and understandable. Cheers!

  146. Devin R. Olsen says:

    Challenge excepted!

    Yes indeed its a very simple transition with what we have here already.

    If we remove position:relative; from \”#navigation ul li\” and for our demo sakes, move it up to the \”#navigation\” rule we can extend our sub menus to the width of the entire menu.

    To do so add a width:100%; to \”#navigation li ul\” rule and change top:20px; to top:30px;.

    Next remove width:160px; from \”#navigation li:hover ul\” rule.

    Last we must display our sub menu items inline of each other so in this \”#navigation li li\” rule change display:list-item; into display:inline; and add a float:left;

    Vola horizontal menu with horizontal sub menu.

  147. mark.stewart@shaw.ca says:

    I like the minimal code.
    But I have a challenge for all.
    How do you make the sub-menus horizontal?
    When you hover a menu item with a sub-menu,
    the drop down sub-menu items display on a horizontal line,
    under the main menu line.
    Stu Nichols at css-play.co.uk calls this appearance the horizontal drop-line menu, but he uses a mass of code to anchor the main menu and the drop-line menus in multiple tables.
    Will the clean code here adapt to the drop-line model?

  148. Devin R. Olsen says:

    Brian L.

    Please make sure you are not using Dreamweaver’s WYSIWYG mode or rather Design mode alone.

    &-n-b-s-p-; space issues only comes from using the space bar as a structural tool for elements. Results will always be skewed for the persuit of full cross browser compatibility and OS by trying to bend your layout around the preview window of Dreamweaver.

  149. Brian L. says:

    Devin, I ended up placing the cursor in the space and hitting backspace. I had tried playing with margins in the ul li with no luck. I really appreciate your help. On a side not (since you really seem to know your stuff) i have a HTML page the breaks between the navigation buttons on the left of the page. Everything is aligned to top. It does not show to be broken in dreamweaver or the macs in my schools computer labs; only on my home computer in firefox and dreamweaver. You can view the pages at http://allbdesigns.com/Main_links/templates.html and particularly hi def images, tires

  150. Devin R. Olsen says:

    @Brian L., try reducing the margin-left:15px; amount in the (#navigation ul li) CSS rule. Let me know if this works out for ya.

  151. Brian L. says:

    Hey Devin, this tutorial has been the most help I have found lately. However, I am still having a problem. I was using the first part of this tutorial to create a horizontal nav bar using images sliced out of photoshop. It does create the horizontal nav bar, but it also creates small spaces between each nav item. Any ideas for eliminating the small extra spaces? Thanks a bunch!

  152. mark.stewart@shaw.ca says:

    We have a centered drop-line menu. The drop-line does not center, but drifts to the right! Any idea how to fix this?
    Here is the xhtml:
    #tryThis{text-align:center;font-size:1em;font-weight:normal;font-family:Verdana, Helvetica, sans-serif;cursor:pointer;}
    .navbar{position:relative;width:100%;}
    .navbar ul li{display:inline;list-style:none;}
    .navbar li ul{display:none;position:absolute;width:100%;top:1em;left:0%;right:0%;}
    .navbar li:hover ul{display:block;}
    .navbar li li{list-style:none;display:inline;}
    .navbar li a, .navbar li li a{text-decoration:none;}

  153. Fernando says:

    Let me say that this was the best and simple I found. You don’t imagine the crap i’ve been seeing for the last couple of days. It really helped me. Thank you very much

  154. Hitomi says:

    OK, now. . . I learned more than I thought I could! Thanks again.

  155. Hitomi says:

    How come my whole comment is not showing??? Anyway, Thank you so much!!

  156. Hitomi says:

    I just wanted to learn how to write a horizontal menu using div

  157. Greg Simkins says:

    Thanks Devin. This is exactly what I was looking for. I will try it out right away! I was able to read and understand this on my iPhone!

  158. Devin R. Olsen says:

    Ok, I have posted a complete tutorial on the vertical navigation menu. Have a look under CSS tutorials up top. Enjoy.

  159. Devin R. Olsen says:

    @Suresh, Why not, seems useful and has been requested more than once. Consider it done and might be up later tonight.

  160. Suresh says:

    Hi Devin, First of all its a very nice tutorial thanks for taking your time to help others. Please could you teach on another tutorial on how to make parent ul to be vertical (Top Nav) and all the child ul to be on the LHS of the page(left nav or Horizontal menu). Many Thanks.

  161. Tarek says:

    oh devin you played up ,i substracted 2 pixels from the 16px

  162. Devin R. Olsen says:

    @Tarek, when you say \”lowered the top pixels position by 2px\” you mean you took 2 pixels away from the top style over all amount right? You didn’t add two more pixels to the top style… if so and its still giving you problems, send me your email throug

  163. Tarek says:

    Devin i did what you asked me to do : i used the !important then i lowered the top pixels position by 2px, but the problem still exists plz help. if you need the source files just give me a sign

  164. rajan khan says:

    really!…thank you very much!…

  165. Devin R. Olsen says:

    Hi Tarek, looks to me like in IE6 your sub menu sits 1 or 2 pixels lower than the pseudo hover likes. Because of this 1 or 2 pixel gap, you will make the pseudo hover rule fall off as it should when you hover off the menu. I suggest that in your #Hnav li ul CSS rule you alter the top style and lower it by a few pixels and see if that helps with the IE6 glitch. Also if you would like to isolate IE6 to only have a lower top value, I would use the !important rule on it. Second, it looks like you are using PNG 24 alpha images here in your header, please refer to this tutorial on how to fix PNG images in IE PNG Alpha Transparency Fix

  166. Tarek says:

    thank’s Devin, unfortunately my h-menu doesn’t work properly in internet explorer 6 .
    plz take a look and tell me what’s wrong with my css file
    http://www.tribaly.com/projets/appma/
    thank’s

  167. Yoda Turbo says:

    Hey Devin, Thanks a lot for this tutorial! It’s content quality, clarity and usefulness is equal to that of the renowned W3Schools.com, and that’s saying something! This one definitely gets a bookmark! Keep up the good work!

  168. vaibhav says:

    thanks forthis tutorial it is a great help for learners like me.

  169. monyuka says:

    best tutorial i’ve ever seen for pure CSS horizontal menu. thanks devin !

  170. Devin R. Olsen says:

    Hi Cat, to make a horizontal sub menu instead of the standard vertical drop down you will need to change just a few styles.

    * First add a position:relative; to your #navigation{} style rule.

    * Second Remove the position:relative; from your #navigation ul li style rule.

    * Thrid Turn top:20px; in to top:25px; in your #navigation li ul style rule.

    * Forth Change the width:160px; to width:100%; in your #navigation li:hover ul.

    * Fifth Turn display:list-item; to be display:inline; and also add float:left; to your #navigation li li style rule.

    Vola a horizontal sub menu.

    Great question CAT.

  171. CAT says:

    WOW..THIS SITE IS AWESOME..the best I have read so far. How do you make your favicon to move and change?? This is so cool! Can you teach me how to do that?

  172. cat says:

    This is far best out of everything I have read on the web!! you are great!! and updates even!!

    One question tho. When I tried to make a submenu, like yours, instead of making a vertical drop down menu. I tried to make a horizontal menu… by giving some width.. but the alignment is really a pain. Can you please let me know if you can show me how I can improve my design.. now I use a way to hide it.. so it look like its working..
    ….still try to solve the problem

  173. HKansal says:

    I am having IE6. The :hover is making the anchors underline, but the sub menus are not coming up. I hope it’s only a prob with IE. Any Suggestions?

  174. Devin R. Olsen says:

    Aj, indeed sub sub menus can be useful and they only require what you have already learned from this tutorial. Simply create a new sub level of CSS rules like you have done for the first sub menu level.

    So instead of:

    #navigation li ul

    #navigation li:hover ul

    #navigation li li

    #navigation li li a

    #navigation li li a:hover

    you would have a new second level of rules like this:

    #navigation li li ul

    #navigation li li:hover ul

    #navigation li li li

    #navigation li li li a

    #navigation li li li a:hover

    The only other changes would have to be in the new sub level rule \”#navigation li li ul\” where you would want to adjust the top and left rules to your desired results.

    Lastly don’t forget to add a new sub level unordered list in our structure where you desire a second sub level menu.

    I was going to write a tutorial on a second sub level but I soon figured if you have studied this tutorial from start to finish you should be able to walk away with knowing to setup a second sub level fairly easily.

  175. Devin R. Olsen says:

    Hi SauloA,

    In order to center the menu you must add a few simple styles to our unordered list rule.

    #navigation ul
    {margin-left:auto; margin-right:auto; margin-top:0px; padding:0px; width:470px; text-align:left;}

    We have replaced the margin:0px; with a margin of left right and top. Both left and right are set to auto while top is 0px in order to still remove the unneeded default margin that comes with a unordered list.

    We also have added a set width, now this is important because you cant set an element to be centered with out first declaring its width. For this menu our width is respectively 670px.

    Our last addition to this rule is a text align of left in order to override our next and final addition.

    In IE6 you cant use margin autos without first declaring the element of questions parent node to have a text align of center. So we give our \”#navigation\” rule a text align of center and override it with our text align of left in our unordered list.

    #navigation
    {width:100%; height:30px; background:#999; text-align:center;}

    Hope this helps, and keep the questions coming people don’t be shy!

  176. SauloA says:

    Is there anyway to have the menu centered in the div? I would rather have my menu centered instead of on the left.

  177. Aj says:

    Add a 2 level drop box and that would be tight. good tutorial my man

  178. Craig says:

    This IS amazing! no javascript, wow! Bookmarked!

  179. Devin R. Olsen says:

    @Joe – Hey, glade you liked it. Feedback like this always lifts my spirits especially when I know I have helped yet another individual. Stay tuned for much more to come guys!

  180. Joe says:

    This is amazing!!! I like the way you break it down, it is really easy to follow. I will be returning my cyber friend…thanx alot

  181. Devin R. Olsen says:

    @Yup! Sounds like it might be a useful tutorial. Certainly will but I cant say for sure when I will be done cause I have a lot of them in the works right now. Keep checking back and I will certainly get something up soon.

  182. Yup! says:

    Could you make a tutorial on how to make a pure css vertical navigation menu? Where the menu is on the first of a three column layout? It could help me alot! And nice tutorial btw!

  183. Devin R. Olsen says:

    Hi Wondwossen, this is in fact the second time I have been asked to either include this into my menu builder under tools or exstend this totorial and talk about sub menus with in a sub menu. Tonight I will hopfuly be adding to this tutorial and show the best way to setup this horizontal menu with infinite sub menus. stay tuned

  184. Wondwossen says:

    How to create submenu with submenu

  185. Wynand says:

    Thanx for the tut… it’s very helpfull

  186. Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply