0

我对 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>

请，非常感谢任何帮助。太感谢了！

4

2 回答 2

0

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

编辑这个CSS：

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

并添加这个CSS：

#navbar li li{
    padding:0;
}

jsFiddle 在这里

于 2013-11-11T07:53:27.690 回答
0

试试这个，

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

http://jsfiddle.net/Yt66E/

于 2013-11-11T07:46:31.967 回答