PDA

View Full Version : CSS dropdown menu has minor issues


jay
11-02-2009, 12:27 PM
Hi

I am trying to convert a standard menu to a dropdown menu, but it seems that the items in the dropdown are to the right. The right edge of my button is not showing. and the list items do not appear below the menu item.

I'm kinda new at the so any help would be appreciated.

CSS Code

#nav, #dropdown {
margin:0;
padding:0 0 0 32px;
list-style:none;
overflow:hidden;
background:#fff url(button1.gif);
border:1px solid #000;
border-width:0 1px;
border-bottom:1px solid #444;
}

#nav li {
float:left;
}
#nav li a{
display:block;
height:35px;
line-height:35px;
color:#DAE0F1;
text-decoration:none;
font-size:11px;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:left;
padding:0 0 0 8px;
cursor:pointer;
}
#nav li a:hover {
color:#FFF;
text-decoration:none;
background:#000 url(button2.gif);
}
#nav li a:hover b {
background:url(button2.gif) no-repeat right top;
}
#dropdown {
position:absolute;
display:none;
z-index:50;
background:#fff);
}
#dropdown li {
float:none;
}
dropdown li a {
color:#000;
}
#itemtwo:hover #dropdown {
display:block;
background-position:left;
}
#nav li.current a:hover {
color:#fff;
background:#000 url(button3.gif);
cursor:default;
}
#nav li.current a:hover b {
background:url(button3.gif) no-repeat right top;
}

#nav li.current a {
color:#fff;
background:url(button3.gif);
}
#nav li.current a b {
background:url(button3.gif) no-repeat right top;
}


HTML Code

<ul id="nav">
<li><a href="index.php">Home</a></li>
<li id="itemtwo"><a href="seller_map.php">Property wanted</a>
<ul id="dropdown">
<li><a href="gauteng_seller.php">Gauteng</a></li>
<li><a href="westcape_seller.php">Western Cape</a></li>
<li><a href="KZN_seller.php">KwaZulu Natal</a></li>
</ul>
</li>
<li><a href="buyer_map.php">Property for sale</a></li>
<li><a href="account_home.php">My Account</a></li>
<li><a href="bond.php">Need a Bond</a></li>
<li><a href="investments.htm">Property Investments</a></li>
<li><a href="process.html">Process</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

Thanks

jay
11-02-2009, 07:08 PM
i got it thanks