...

View Full Version : CSS Drop down menu



kammage
05-20-2008, 09:09 AM
I have a horizontal drop down menu which contains a few links. However, only one of them actually contains a drop down. When I mouse over it, the secondary menu drops down, but for some reason the primary and secondary menu get wider, and push over the remaining links to the right of it.

Here is a snippet of my code:

HTML:

<ul id='menu'>
<li ><a href='link1.html'>Link1</a></li>
<li ><a href='link2.html'>Link2</a></li>
<li ><a href='link3.html' >Link3</a>
<ul>
<li><a href="link3a">Link3a</A></li>
<li><a href="link3b">Link3b</A></li>
</ul>
</li>
<li ><a href='link4.html'>Link4</a></li>
<li ><a href='link5.html'>Link5</a></li>
</ul>

CSS:

#menu li {
display: block;
list-style: none;
width: auto;
height: 36px;
background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
padding: 0 10px 0 10px;
position: relative;
}

#menu a {

color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
line-height: 250%;
}

#menu li a {
color: #FFFFFF;
background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
text-decoration: none;
width: auto;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul li {
display: block;
list-style: none;
height: 36px;
background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
padding: 0 10px 0 10px;
position: relative;
}

#menu ul li a{
height: 36px;
color: #FFFFFF;
text-decoration: none;
display: block;
float: left;
}

div.menu ul ul,
div.menu ul li:hover ul ul,
div.menu ul ul li:hover ul ul
{display: none;}

div.menu ul li:hover ul,
div.menu ul ul li:hover ul,
div.menu ul ul ul li:hover ul
{display: block;}

I don't have a lot of css knowledge. I've been tweaking this thing forever and cannot for the life of me figure out how to make it work. Could someone enlighten me please??

technica
05-20-2008, 01:23 PM
A good article thats will help you to understand how to create CSS manus is available at Creating CSS Menus (http://www.technicaltalk.net/index.php/topic,66.0.html)


Hope this helps you to solve your problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum