0

私はCSSを初めて使用するので、どんな助けでも大歓迎です。現在、CSS メニューに Suckerfish スクリプトを使用していますが、これは IE がまだ存在するためです。ただし、第 2 レベルのメニューを第 1 レベルの直下に配置することはできません。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 に答える