Comments on: Pure CSS Horizontal Menu

By: David

David — Mon, 18 Jan 2010 06:48:20 +0000

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

By: diaconu liviu

diaconu liviu — Sat, 09 Jan 2010 12:42:53 +0000

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;}

By: Otto Tatsumi

Otto Tatsumi — Wed, 30 Dec 2009 11:50:21 +0000

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

By: Syk

Syk — Thu, 24 Dec 2009 15:58:51 +0000

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!

By: indialike

indialike — Thu, 10 Dec 2009 11:09:04 +0000

This is really very good Site… Thanks

By: Vijay

Vijay — Tue, 17 Nov 2009 21:31:49 +0000

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