2

過去 3 日間、データベースから生成されるメニュー構造の作成に費やしました。私のリスト項目のスタイリングを除いて、それは完全に機能します。問題領域の背景を赤で着色しました。これらの領域は、単語にカーソルを合わせると表示されます

バス停
従業員
フェンス
乗り物

これらの赤いボックス内のリスト項目は、上下ではなく横に並んで表示されています。私は一生うまくいかないのはなぜですか？

私の問題を説明するためにフィドルを作成しました: http://jsfiddle.net/devin85/tMYxT/4/

また、Javascript セクションで背景色を赤に設定して、ホバー イベントが発生している場所を示し、善良なサマリア人がコードを検索する時間を節約できるようにしました。

誰か助けてください！前もって感謝します。

4

3 に答える 3

6

それはあなたのCSSが原因です。

宣言すると

#navigation li, .headerRight li { margin: 4px 7px 4px 2px; padding: 0px; float: left; background-color: Transparent; }

ブラウザに、そうでないことを伝えるまで、ナビゲーションの下にあるすべての li を左にフロートするように指示しています。

#navigation .submenu .submenu li {
   float:none;
}

2 番目のレベルのサブメニューにある場合、すべてのリスト項目に表示されないように指示します。

于 2012-09-13T13:43:14.060 に答える
2

この行を css ファイルの最後に追加すると、それらの行が左側に表示されなくなります。

#navigation .submenu li .submenu li {
    float:none;
}
于 2012-09-13T13:39:12.590 に答える
1

あなたのcssは混乱しています。きれいにしましょう。

まずはフロートをクリアしましょう

#logo,#currentPage {
    clear:both;
}
.clearfix{
    clear: both;
}
#headerDiv:after, #navigation:after{
    content: '';
    display:block;
    clear:both;
}

次に、サブメニューにある場合position:absolute、親にはあるliはずですposition:relative

.headerLeft li {
    position: relative;
}

から を削除heightしheader, #headerDivます。

これが私が今持っているものです-フィドルの例です。それで、あなたはそれがどのようになると予想しますか？

于 2012-09-13T13:52:06.367 に答える