0

私はメニューの2つの層を持っています - 別のネストされたulを持つul、 - ドロップダウンサブメニューを持つメニュー例えば:

   <div id="menu">
    <ul>
     <li>Menu item</li>
     <li>Menu item
      <ul>
        <li>Sub Menu item</li>
        <li>Sub Menu item</li>
      </li>
      </ul>
     <li>Menu item
       <ul>
        <li>Sub Menu item</li>
        <li>Sub Menu item</li>
      </li>
      </ul>
     </li>
    </ul>
</div>

最初の ul はインラインで表示され、2 番目の ul はブロックで表示され、JQuery を使用して非表示および表示されます。

サブメニュー ul をそれぞれの親 li の下に配置する次の CSS があります。

#menu UL LI {
    list-style-type: none;
    display: inline;
    padding: 10px;
    position: relative;
}


#menu UL LI UL {
    display: none;
    z-index: 999;
    position: absolute;
}

#menu UL LI UL LI {
    display: block;
    width: 100px;
}

私の問題は、サブメニュー項目が FireFox と IE のそれぞれの親の下に表示されないことです。ただし、Chrome と Safari では問題なく動作します。

これが正しい方法だと思ったのですが、もっと良い方法を知っている人はいますか？

4

4 に答える 4

1

希望する状態にするには、いくつかの小さな変更が必要です。

 #menu ul li {
+  display: inline-block;
-  padding: 10px;
+  padding: 0 10px 0 10px;
 }

 #menu ul li ul li {
+  padding: 10px;
 }
于 2013-02-21T00:39:50.210 に答える
0

車輪の再発明の必要はなく、より柔軟です：http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-メニュー/

デモ： http： //nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

また、柔軟なレイアウトを使用する予定がない場合は、固定幅を設定します。ブラウザが縮小すると、サイトが壊れます。

于 2013-02-21T00:43:52.313 に答える
0

適切な場所に配置する最も簡単な方法は、親LIに配置することです。

css宣言に追加left: 0すると、希望どおりに動作し始めるはずです。#menu UL LI UL

于 2013-02-21T00:45:06.940 に答える
0

サイトからマークアップをコピーした場合は、これが原因である可能性があります。開始タグと終了タグが一致しません。ここで修正しました：

<div id="menu">
<ul>
    <li>Menu item</li>
    <li>Menu item
        <ul>
        <li>Sub Menu item</li>
        <li>Sub Menu item</li>
        </ul>
    </li>
    <li>Menu item
        <ul>
        <li>Sub Menu item</li>
        <li>Sub Menu item</li>
        </ul>
    </li>     
</ul>
</div>

私はあなたのcssにいくつかの簡単な修正を加えました。

#menu ul 
{
    background: blue;
}

#menu ul li 
{
    list-style-type: none;
    width: 100px;
}

#menu ul > li
{
    display: inline-block;
    position: relative;
    padding: 10px;
    height: 20px;
    background: red;
}

#menu li > ul
{
    display: none;
    position: absolute; left: 0px; top: 40px; z-index: 999;    
    background: yellow;
}

#menu li > ul > li
{
    display: block;
    background: green;
}
于 2013-02-21T01:21:41.437 に答える