help with CSS menu wich keep active color always

	<li><a href="#">Artificial Greenery</a>
		<ul>
			<li><a href="#">SUB category 2</a>			
			<li><a href="#">SUB category 2</a>					
				<ul>						
					<li><a href="#">SUB category 3</a>						
					<li><a href="#">SUB category 3</a>						
					<li><a href="#">SUB category 3</a>					
				</ul>			
			<li><a href="#">SUB category 2</a>		 
		</ul>

Should be

<li><a href="#">Artificial Greenery</a>
           <ul>
			<li><a href="#">SUB category 2</a></li>	
			<li><a href="#">SUB category 2</a>				
				<ul>						
					<li><a href="#">SUB category 3</a></li>						
					<li><a href="#">SUB category 3</a></li>						
					<li><a href="#">SUB category 3</a></li>				
				</ul></li>		
			<li><a href="#">SUB category 2</a></li>		 
		</ul></li>

They are now nested correctly

thanks but I think that is not the problem...
im not CSS expert but i noticed that
the working sample have class="bla bla " and the no working sample have id="bla bla"

it maybe dont influencies, but the thing is that i need to implement that feature of keeping the active list color on my existing css, im not just coping the saplme.

any help will be apreciated

thanks

Yeah it isn't.

Thought it might be a closing tag issue, but it isn't.

Gonna av a go at making a menu similar, to see whats what.

PS I bodged that nesting up anyway. :oops:

sugar - you may be a newbie, but you're spot on. Ids and Classes are different things - if you define #class but use class="class" it won't work.

And your markup is simply horrible I mean this in the nicest way possible. The structure is poo, you have no sense, no doctype, no head or body section.

Nest it correclty, get it validated, then it will work better.

And as an aside, from a HCI standpoint, the menu is bad - there is no warning that hovering over some links will open a submenu.

after get working the asked on this topic, (keep the higlight color over the submenus) i will work in a submenus identifier, and in a current page identificator color.

i belive step by step is the best way do do things even if you're a guru.

thanks for your comments, and be sure i will post my menu in the "critique" area when finished.

PD and about why i dont have doctype identifiers, its because i cant, please read why: http://www.ystoretools.com/Forums/topic.asp?TOPIC_ID=29123

thanks

okay i have a better sintax on that post... so any suggestion is welcome...:

it may could be a very simpe thing for the some of you guys, but im really novelty, look this code it do a list menu and keeps the active menu yellow color, from the main list until the sub and sub-sub list, in other words, is easty do identify from wich main menu come from the active submenu...
this is the nicely working code

<style>
<!--
ul.makeMenu2, ul.makeMenu2 ul { width: 80px; padding-left: 0px; }
ul.makeMenu2 li {margin: 0px; position: relative;}
ul.makeMenu2 li > ul { display: none; position: absolute; top: 2px; left: 78px; }
ul.makeMenu2 li:hover, ul.makeMenu2 li.CSStoHighlight { background-color: #ffa; color: #000; }
ul.makeMenu2 li:hover > ul { display: block; }
/-->
</style>

<ul class="makeMenu2">
<li> Lips
<ul>
<li><a href="cat.html">Cat</a>
<li><a href="rabbit.html">Rabbit</a>
<li><a href="dingo.html">Dingo</a>

</ul>
</ul>

that code made sense with the using of the > operator between some of the li and ul objects, but no same result with the code below, NOTE that the working gode call the css this way: <ul class="makeMenu2"> and the seccond code call css this different way: <ul id="nav">

<style type="text/css"> <!--
#nav, #nav ul { width: 150px; }
#nav li { position : relative; float : left; }
#nav li ul { position : absolute;left: -999em; margin-left : 9.3em; margin-top : -1.35em; }
#nav li ul ul { position : absolute; left: -999em; margin-left : 9.3em; margin-top : -1.35em; }
#nav li a { width: 11em; w\idth : 14em; display : block; color: #0707cf; background-color : white; background: #ccf}
#nav li a:hover, #nav li.CSStoHighlight { background: #0707cf; color: #fff; padding-left: 10px float: left }
#nav li:hover ul { display: block; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#content { margin-left : 0em; } /-->
</style>
<ul id="nav"><li><a href="#">Artificial Greenery</a>
<ul>
<li><a href="#">SUB category 2</a>
<li><a href="#">SUB category 2</a>
<ul>
<li><a href="#">SUB category 3</a>
<li><a href="#">SUB category 3</a>
<li><a href="#">SUB category 3</a>
</ul>
<li><a href="#">SUB category 2</a> 
</ul></ul>