Jump to content

redfinger
 Share

Recommended Posts

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
Link to comment
Share on other sites

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; }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...