2 level css drop drop down menu help

[redfinger]

hey guys please l need help with my css drop down menu.l got the 1 level drop down right but cant seem to be able to add the 2

nd level. this is the code

 

 

html

 

 

<ul id="navbar" >

<li><a href="#">HOME</a></li>

<li><a href="#">COMPANY</a></li>

<li><a href="#">PRODUCTS</a>

<ul>

<li><a href="#">Steel Profile</a></li>

<li><a href="#">Steel Pipe</a>

<ul>

<li><a href="#">welded steel pipe</a></li>

<li><a href="#">seamless steel pipe</a></li>

</ul>

</li>

<li><a href="#">Steel Coil</a></li>

</ul>

</li>

<li><a href="#">PROFILE</a></li>

<li><a href="#">SALES NETWORK</a></li>

<li><a href="#">CONTACTS</a></li>

<li>

</ul>

css

#navbar {

margin: 0;

padding: 0;

height: 1em; }

#navbar li {

list-style: none;

float: left; }

#navbar li a {

display: block;

padding: 3px 8px;

background-color: #5e8ce9;

color: #fff;

text-decoration: none; }

#navbar li ul {

display: none;

width: 10em; /* Width to help Opera out */

background-color: #69f;}

#navbar li:hover ul {

display: block;

position: absolute;

margin: 0;

padding: 0; }

#navbar li:hover li {

float: none; }

#navbar li:hover li a {

background-color: #69f;

border-bottom: 1px solid #fff;

color: #000; }

#navbar li li a:hover {

background-color: #8db3ff; }

#navbar li li ul

{

display:none;

}

#navbar li li:hover ul {

display:block;

left:150px;

margin-top: -1.5em;

}

#navbar li li:hover li

{

float:right;

}

thanks for your help

[dsonesuk]

First you have spare <li> at end, which does not help.

/* first zero all ul li elements set type to none*/#navbar, #navbar ul, #navbar li {margin: 0;padding: 0;list-style: none;text-indent:0;}#navbar{height: 1em; }#navbar li {position:relative; /* A MUST to control position absolute element positioning */float: left; }#navbar li li {width:100%; /*set floated element to total width of parent ul */ } #navbar li a {display: block;padding: 3px 8px;background-color: #5e8ce9;color: #fff;text-decoration: none; } #navbar li ul {display: none;width: 10em; /* Width to help Opera out */background-color: #69f;position: absolute;}#navbar li ul ul {top:0;margin-left: 10em;} /*set position of absolute 2nd submenu */#navbar li:hover ul {display: block; } #navbar li:hover li a {background-color: #69f;border-bottom: 1px solid #fff;color: #000; } #navbar li li a:hover {background-color: #8db3ff; } #navbar li:hover ul li ul { /*hide 2nd sub menu ul on hover of top level li */display: none; }  #navbar li ul li:hover ul { /*show 2nd sub menu ul on hover of 1st level li */display: block; }