1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Pure css menu working ok! Add 1 hierarchy more

Add a subitem into css menu

         

silverbytes

11:03 pm on May 10, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My css menu is working ok. It's a dropdown menu, but now, I need to add one more hierarchy to put subitems.

What I have is something like this in my htm page: 


<DIV><A href"#">Main</A></DIV><LI><a href="#">Item</a><UL><LI><a href="#">Item2</a></LI>
<LI><a href"#">Item3</a></LI>
</UL></LI>

And a css file like this: 


#nav {
FLOAT:left;
MARGIN: 0px;
WIDTH:100%;
text-align: center;
LINE-HEIGHT: 1;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(fotos/midbkg.gif);
background-repeat: repeat-x;
padding: 0px;
}
#nav UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
#nav A {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 30px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
#nav LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FLOAT:left;
PADDING-BOTTOM: 0px;
PADDING-TOP: 7px;
HEIGHT: 20px;
background-repeat: no-repeat;
background-image: url(fotos/navlibkg.gif);
background-position: 22px 52%;
}
#nav LI A:hover {COLOR: #e7f14d}
#nav A:hover {COLOR: #476690}
#nav LI UL {LEFT: -999em; MARGIN: 7px 0px 0px -1.5em; WIDTH: 140px; POSITION: absolute; HEIGHT: auto}
#nav UL LI {BACKGROUND-POSITION: 0% 0%; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: repeat}
#nav LI LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 140px; LINE-HEIGHT: 160%; PADDING-TOP: 0px; HEIGHT: auto} 
#nav LI UL A {BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #77AB44; PADDING-BOTTOM: 0px; BORDER-LEFT: #fff 1px solid; WIDTH: 137px; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px; HEIGHT: auto}
#nav LI UL A:hover {COLOR: white; BACKGROUND-COLOR: #a3c3d8}
#nav LI UL UL {MARGIN: -1.9em 0px 0px 11.8em; WIDTH: 140px}
#nav LI:hover UL UL {LEFT: -999em}
#nav LI:hover UL UL UL {LEFT: -999em}
#nav LI.sfhover UL UL {LEFT: -999em}
#nav LI.sfhover UL UL UL {LEFT: -999em}
#nav LI:hover UL {LEFT: auto}
#nav LI LI:hover UL {LEFT: auto}
#nav LI LI LI:hover UL {LEFT: auto}
#nav LI.sfhover UL {LEFT: auto}
#nav LI LI.sfhover UL {LEFT: auto}
#nav LI LI LI.sfhover UL {LEFT: auto}
#nav LI:hover {POSITION: static}
#nav LI.hover {POSITION: static}

I'd like to add items like "Item 1b" or "Item 2b" but I guess that css need a twek to do so and also add some code in htm page (perhaps a class="subitem" to LI?)

May you help me?

silverbytes

1:38 pm on May 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Anybody may point me in the right direction please?...

le_gber

2:15 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You may not want to start over, but rather that re-inventing the wheel, try googling for 'son of suckerfish' you will get a multi level drop down explained very well.

silverbytes

2:55 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks. I thought that just making a new style to apply a class I could easily get the other level (I just have that raw idea but don't know exactly how to accomplish that, and obviously that's the hard part)

le_gber

3:31 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



in css you don't need new classes for each level.
The suckerfish is good for that as it defines the <ul id="nav"> and then all of the children element from there:

#nav ul (for 1st level popups)
#nav ul ul (for second level popus)
etc...

silverbytes

5:48 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Isn't that what the above code I posted at begining is doing?

#nav LI UL {LEFT: -999em; MARGIN: 7px 0px 0px -1.5em; WIDTH: 140px; POSITION: absolute; HEIGHT: auto}

Wouldn't be enoguh to define a
#nav LI UL UL {LEFT: -999em; MARGIN: 7px 0px 0px -1.5em; WIDTH: 140px; POSITION: absolute; HEIGHT: auto}

?

le_gber

5:56 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



yes it is. Looking closely I even think that it's the same script :)

But on that website - htmldog - you got example of multi (up to three) popups / dropdown. isn't there one showing what you try to achieve?

silverbytes

6:04 pm on May 16, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



htmldog couldn't find what you suggested, may you sticky me the url?

silverbytes

10:25 pm on May 22, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have this simplified page to test my navigation, already css validated.

Problem: in IE 7 the subitems shows but shifted to the left some 200 pixels.
In Firefox shows almost good, but it would be nice the subitems starts aligned in vertical with the "item" instead begin placed higher as it is now.

html code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>Probando</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT src="script.js" type=text/javascript></SCRIPT><link href="styles2.css" rel="stylesheet" type="text/css"><link href="nav.css" rel="stylesheet" type="text/css"></head><body><div id="travel"><div id="angelfalls"><div id="destination-content">
<h1>Test Page Title Here Please </h1>
<h2>Un texto que sea bien bien bien larguisimo </h2>
</div></div><div id="hotels"><div id="hotels-content">
<h2>Un texto que sea bien bien bien larguisimo <br> 
Un texto que sea bien bien bien larguisimo </h2>
</div></div></div>
<ul id=nav>
<li>
<!-- Home -->
<div><a href="/argentina-brazil-hotels.htm">Bla</a></div>
<!-- Argentina -->
<li><a href="/argentina-brazil-hotels.htm#argentina">Has levels</a>
<ul>
<li><a href="/hotels-in-bariloche.htm">Item</a>
<ul>
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
</ul></li>
</ul>
</li>
</ul>
<div style="clear:both"></div>

CSS code for nav: 

#nav {
FLOAT:left;
MARGIN: 0px;
WIDTH:100%;
text-align: center;
LINE-HEIGHT: 1;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(fotos/midbkg.gif);
background-repeat: repeat-x;
padding: 0px;
}
#nav UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
#nav A {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 30px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
#nav LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FLOAT:left;
PADDING-BOTTOM: 0px;
PADDING-TOP: 7px;
HEIGHT: 20px;
background-repeat: no-repeat;
background-image: url(fotos/navlibkg.gif);
background-position: 22px 52%;
}
#nav LI A:hover {COLOR: #e7f14d}
#nav A:hover {COLOR: #476690}
#nav LI UL {LEFT: -999em; MARGIN: 7px 0px 0px -1.5em; WIDTH: 140px; POSITION: absolute; HEIGHT: auto}
#nav UL LI {BACKGROUND-POSITION: 0% 0%; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: repeat}
#nav LI LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 140px; LINE-HEIGHT: 125%; PADDING-TOP: 0px; HEIGHT: auto} 
#nav LI UL A {BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #77AB44; PADDING-BOTTOM: 0px; BORDER-LEFT: #fff 1px solid; WIDTH: 137px; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px; HEIGHT: auto}
#nav LI UL A:hover {COLOR: white; BACKGROUND-COLOR: #a3c3d8}
#nav LI UL UL {MARGIN: -1.9em 0px 0px 11.8em; WIDTH: 140px}
#nav LI:hover UL UL {LEFT: -999em}
#nav LI:hover UL UL UL {LEFT: -999em}
#nav LI.sfhover UL UL {LEFT: -999em}
#nav LI.sfhover UL UL UL {LEFT: -999em}
#nav LI:hover UL {LEFT: auto}
#nav LI LI:hover UL {LEFT: auto}
#nav LI LI LI:hover UL {LEFT: auto}
#nav LI.sfhover UL {LEFT: auto}
#nav LI LI.sfhover UL {LEFT: auto}
#nav LI LI LI.sfhover UL {LEFT: auto}
#nav LI:hover {POSITION: static}
#nav LI.hover {POSITION: static}

May anybody help?

SuzyUK

9:03 am on May 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Problem: in IE 7 the subitems shows but shifted to the left some 200 pixels.

remove 

text-align: center
from the #nav rule and add it to #nav a instead - IE is positioning the drops by aligning to the center of the <li> - doing the above this will make IE happy as the left(default) alignment will still be present on the li.

it would be nice the subitems starts aligned in vertical with the "item" instead begin placed higher as it is now.

change 

#nav LI:hover {POSITION: static}
#nav LI.hover {POSITION: static}

to 

#nav LI:hover, #nav LI.hover {position: relative;}

then change 

#nav LI UL UL {MARGIN: -1.9em 0px 0px 11.8em; WIDTH: 140px}

to 

#nav li ul ul {top: 0; margin: 0 0 0 140px; width: 140px;}

it's the negative top margin which is moving the sub menus up, and instead of guessing the height of the li you can use the top positioning, but you have to make the containing <li> position: relative so the drop knows what "top" you're speaking about.
You could just play around with negative top margin to make it more suitable, but it will not be perfect x-browser because the line-height of the <li> will vary by a pixel or two depending on font size.

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:59 am May 2, 2026