Suckerfish drop-down submenu not aligned with main menu - css

Question

I'm quite new with CSS so any help greatly appreciated. I'm currently using the Suckerfish script for my CSS menu, only because IE still exists. However, I can't get the second level menu to align directly under the first level -- not just IE, but Chrome and Safari as well.
I looked up solutions on this website, but I can't get them to work for my code...
Here's my CSS code (I'm sorry if it's messy):
#navbar {
width: 900px;
color: #a26868;
font-size: 10px;
padding: 10px 10px 10px 10px;
float: left;
background: #fff ;
}
#nav, #nav ul {
padding: 0px 15px 0px 15px;
margin: 0;
list-style: none;
line-height: 18px;
}
#nav a {
display: block;
width: 140px;
}
#navbar li {
list-style: none;
float: left;
padding: 0px 15px 0px 15px;
display: block;
width: 140px;
text-align: center;
height: 18px;
background-image: url(line-nav.gif);
background-repeat: no-repeat;
background-position: center;
text-decoration: none;
}
#navbar li a {
text-decoration: none;
color: #a26868;
}
#navbar li ul {
list-style: none;
color: #5e0505;
background-image: url(line-nav.gif);
background-repeat: no-repeat;
background-position: center;
background: rgba(255,255,255,0.8);
border-bottom: solid 1px #88c657;
width: 140px;
display: block;
position: relative;
left:-999em;
}
#navbar li:hover ul, #navbar li.sfhover ul {
left: 0;
}
And this is the HTML code:
<ul id="navbar">
<li>ABOUT<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>SHOWCASE<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>PORTFOLIO<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>MEDIA<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>CONTACT<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
</ul>
Please, any help greatly appreciated. Thank you so much!

Answer 1

try this one,
#navbar li:hover ul, #navbar li.sfhover ul {
left:-50px;
}
http://jsfiddle.net/Yt66E/

Answer 2

your sub menu ul has padding and li too so you need to remove these paddings like this:
edit this CSS:
#navbar li:hover ul, #navbar li.sfhover ul {
left: 0;
padding:0; /* added */
}
and add this CSS:
#navbar li li{
padding:0;
}
jsFiddle is here