Pure CSS Horizontal Menu
(NOTE!!! This Tutorial Has An Update In Order To Support IE5.5 and IE6 with pseduo CSS hover states)
CLICK HERE FOR THIS TUTORIALS UPDATE!
Today I wanted to share the easy method of creating a pure CSS horizontal navigation menu with you.You see a lot of sites using them and while some are very creative others are way off base as far as functionality and SEO is concerned.So without further ado let’s begin to create this horizontal navigation menu.
Here is our blank document we will use to for this tutorial.
<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 links by using a div box. I will give my div box an id of “navigation” but you may 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 some open and close style tags that will contain all of this tutorials CSS.
<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 you can find out on the internet for free.
Ok so let’s look at what we have done to our container.
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.
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 in order 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) tells our browser to start adding specific rules to any <ul> in our navigation container.
(#navigation ul li) tells our browser to start reading specific rules to any <ul> <li> in our navigation container. Now that we are directly pointing to our <ul> and <li> lets add some property’s to these guys.
Make these new rules in your CSS look like this.
#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 tell our navigation to be positioned into our container at top left. Later we can play with how much we want the navigation to be positioned off the top and left of our container.
Next we point directly to our list items and give them style rules of display, height, float and list style. The display rule is set to inline to position our list items in a horizontal fashion and the float rule has a style of left to help with the list items and their horizontal fashion. We have also set our height rule to 30px to match the height of our over all menu and list-style rule is set to none to remove our list item bullets or dot.
Great now we are on track to creating a horizontal menu, but hmm it looks kind of bunched up in there and hard to read where one menu item starts and another menu item ends. To fix this 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.
Much better now, we can clearly see where each menu item starts and ends.
Let’s now turn our menu items into links. Make your menu items look like the following.
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 are our results now that we have wrapped each of our list items text around links.
YIKES, that’s just plain ugly looking right?
Ok let’s look at two things wrong here and see if we can’t fix this with CSS. First our menu items now have a solid blue color that is standard for all links but this is our navigation and we may want to style it differently for obvious reasons. The other problem is that each link now has underline text decoration. It’s common for menu items to only display an underline text decoration when the menu item is being hovered over.
Ok let’s fix these two issues now by adding rules to our link tags <a> in CSS.
#navigation li a
{}
#navigation li a:hover
{}
Like before with our navigation container and our unordered list and items we need to tell our CSS to specifically point to our <a> link tags and to follow our specific rules we will set for it.
We are also going to be setting a hover rule to our link tags in order to give a proper underline text decoration when a user hovers over a link.
Here are our rules and their new property’s for our <a> tags.
#navigation li a
{color:#fff; text-decoration:none;}
#navigation li a:hover
{color:#fff; text-decoration:underline;}
Now our links should have a white font color but no underline if we are not hovering over them.
If we are hovering over a link then our links should still have a font color of white but now should have a text decoration of underline.
Here are our results now.
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.
First let’s get an idea of what our sub menu should look like. Usually sub menus are in a vertical fashion similar to when we first started our navigation menu.
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>
Ok let’s look at the results of add our sub menu items to our overall menu.
YIKES AGAIN! What happen to our menu it’s all messed up now! Well we still have to create just a few more CSS rules in order 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 follow these CSS rules. We are also setting up a rule for when a user hovers over a list item in our main menu to display our sub menu.
So let’s add these property’s to our new rules and start making this submenu perform the way we need it to.
#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;
}
Again we set our sub menu <ul> to have a margin and padding of 0px but we now have added a display rule to it. This display rule is telling our main menu to hide our sub menu from the user.
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 its sub menu.
Finally we have to style our sub menu items to have no list item dots and also be listed in a vertical fashion instead of following its parent’s rule of the horizontal look.
Let’s see what our results look like now.
Ok well we in fact have our sub menu list items styled correctly and our sub menu only displays when we hover over our main menu list items. The problem we now have is that the sub menu items are not being displayed under our main menu items respectively but rather always to the far left resulting in some undesirable effects. We also have no background colors set for our sub menu making it look a little weird.
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 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 relatively absolute to our main menu items. So now add the a (position:absolute;) to our sub menu <ul> rule.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
}
We not only have to add a position of absolute to our sub menu <ul> rule but also a left:0px; and top:20px; property in order to stop the browser from trying to guess where we specifically want the sub menu to be positioned relatively absolute to our main menu items.
All this left rule is saying is that we want our sub menu to be position left by 0px to our relatively positioned main menu list item.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
}
We also wanted to fix our sub menus background color so let’s add it 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.
Excellent we now 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 a link <a></a> and write our last CSS rules.
Make each sub menu look 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 property’s.
#navigation li li a
{color:#fff; text-decoration:none;}
#navigation li li a:hover
{color:#fff; text-decoration:underline;}
Here we are pointing specifically to our sub menu links and saying if a link is not being hovered over then have a font color of white and no text decoration. If a sub menu link is being hovered over then still have a font color of white and a text decoration of underline.
Here are our final results.
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.
Here is the demo if you want to have a peek.
(NOTE!!! This Tutorial Has An Update In Order To Support IE5.5 and IE6 with pseduo CSS hover states)
CLICK HERE FOR THIS TUTORIALS UPDATE!
Enjoy! Devin R. Olsen
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
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;}
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
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!
This is really very good Site… Thanks
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
Man I love the codes, it worked perfectly.
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.
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.
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
Hi Devin,
I am a beginner in web design your tutorial is greatly helpfull. Thank you.
HLM
I always enjoy feedback from my readers.
Thanx for the tut… it’s very helpfull
How to create submenu with submenu
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
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!
@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.
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
@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!
This IS amazing! no javascript, wow! Bookmarked!
Add a 2 level drop box and that would be tight. good tutorial my man
Is there anyway to have the menu centered in the div? I would rather have my menu centered instead of on the left.
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!
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.
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?
Hi HKansal, this tutorial has a follow up on how to fix the pseudo hover for IE5 an IE6 please refer the the links above that say \”CLICK HERE FOR UPDATE\”.
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
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?
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.
best tutorial i’ve ever seen for pure CSS horizontal menu. thanks devin !
thanks forthis tutorial it is a great help for learners like me.
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!
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
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
really!…thank you very much!…
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
@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
oh devin you played up ,i substracted 2 pixels from the 16px
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.
@Suresh, Why not, seems useful and has been requested more than once. Consider it done and might be up later tonight.
Ok, I have posted a complete tutorial on the vertical navigation menu. Have a look under CSS tutorials up top. Enjoy.
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!
I just wanted to learn how to write a horizontal menu using div
How come my whole comment is not showing??? Anyway, Thank you so much!!
OK, now. . . I learned more than I thought I could! Thanks again.
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
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;}
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!
@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.
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
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.
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?
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.
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!
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;}
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
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.
Excellent Code , But only one problem is that\” this code is running in fireforx but not in IE\”
@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
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?
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.
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)
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!
seems it doesn’t work in IE, though works perfect in mozilla
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