kammage
05-20-2008, 08: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??
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??