Suckerfish下拉子菜单未与主菜单对齐

Question

我是CSS的新手，所以非常感谢您的帮助。我目前在CSS菜单中使用Suckerfish脚本，只是因为IE仍然存在。但是，我不能让二级菜单直接在第一级菜单下对齐--不仅仅是IE，还有Chrome和Safari。

我在这个网站上查找了解决方案，但我不能让它们对我的代码起作用……

这是我的CSS代码(很抱歉，如果它很乱)：

#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;
}

这是HTML代码：

<ul id="navbar">
    <li><a href="#">ABOUT</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">SHOWCASE</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">PORTFOLIO</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">MEDIA</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
        <li><a href="#">CONTACT</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
</ul>

请多多帮助，非常感谢。非常感谢!

Answer 1

试试这个，

#navbar li:hover ul, #navbar li.sfhover ul { 
    left:-50px;
}

http://jsfiddle.net/Yt66E/

Answer 2

您的子菜单ul也有padding和li，因此您需要像这样删除这些padding：

编辑此CSS

#navbar li:hover ul, #navbar li.sfhover ul { 
    left: 0;
    padding:0;  /*  added  */
}

并添加此CSS

#navbar li li{
    padding:0;
}