Part of my menu's are being chopped off.

Hi

I am trying to convert a standard menu to a dropdown menu but I did something wrong, because it looks bad.

To the right of the menu item there is no space, it looks chopped off. there is also no spacing between the items. My sub menus are aligned right and do not sit underneath the main items.

I'm kinda lost here.

Any help would be appreciated.

Here the CSS:

#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;
cursorointer;
}
#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 url(button1.gif);
}
#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;
}


And heres the HTML:

<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="seller_map.php">Gauteng</a></li>
<li><a href="seller_map.php">Western Cape</a></li>
<li><a href="seller_map.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>

Jay

 

thanks but i decided to work around it