0

ドロップダウンのリンクの左側に奇妙なパディングがあり、それらがどこから来ているのかわからないことを除いて、うまく機能するドロップダウンCCSメニューがあります。こことウェブで検索しましたが、何が原因なのかわかりません。経験不足で見逃しているのかもしれませんが、まだ見つかりません。ドロップダウンリストを中央または左に配置したいのですが、以下に示すパディングはありません。何が原因なのか教えてください。

 <div>
        <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Fruit</a>
        <ul>
             <li><a href="#">Aplle</a></li>
             <li><a href="#">Banana</a></li>
             <li><a href="#">Orange</a></li>
        </ul>
    </li>
    <li><a href="#"> Veggie</a>
        <ul>
             <li><a href="#">Broccoli</a></li>
             <li><a href="#">Tomato</a></li>
             <li><a href="#">Carrot</a></li>
        </ul>
    </li>                                     
        </ul>
    </div>

HERE is my css:

    #menu{
    width:100%;
    background:#318598;
    text-align:center;
    z-index:0;
}

#menu > li{
    display:inline-block;
    position:relative;
    line-height:35px;
    list-style-type: none;
}

#menu li a{
    display:block;
    text-decoration:none;
    padding:0px 10px;
    color:#fff;
    text-align:center;

}
/* Dropdown Event Properties */
#menu li ul{
   position:absolute;
   top: 35px;
   min-width:150px;
   background-color:rgba(0,0,0,0.5);
   z-index:1;
   list-style-type: none;
}

#menu li ul li ul{
    top:0;
    left:150px;               
}

#menu li ul li a:hover{
   background:rgba(255,255,255,0.5);
}

#menu li ul{
    display: none;

}
#menu li:hover > ul{
    display:block;

}

ここに私のフィドルがあります http://jsfiddle.net/squinny/jz4hM/

また、フィドルは実際にはそれを示していません。ホバー セレクターはドロップ ダウン項目全体にホバーします。Firefox では、左側のドロップ ダウン項目の 4 分の 1 を除くすべてにホバーし、非常に煩わしいものです。すべてのアイデアを歓迎します!

css nomailized on fiddle off: http://jsfiddle.net/squinny/jz4hM/7/

4

2 に答える 2

2

使用しているmin-width: 150px;ので、それに応じてパディングを設定してくださいwidthauto

デモ

CSS

#menu li ul{
   position:absolute;
   top: 35px;
   width:auto;
   background-color:rgba(0,0,0,0.5);
   z-index:1;
   list-style-type: none;
}

またはあなたは与えることができますpadding-right: /*Whatever*/

右パッド付きデモ

于 2012-11-19T16:59:55.730 に答える
-1

cssリセットファイルを使用する必要があります。

jsFiddleはそれを使用しているため、問題が発生しないのはなぜですか。

http://meyerweb.com/eric/tools/css/reset/

于 2012-11-19T16:59:10.350 に答える