最近、Googleチュートリアルを使用して純粋なcssドロップダウンメニューを作成しました。
しかし、私には問題があります:
2番目のレベルに少しマージンを与えると、親とul
の間のギャップにカーソルを合わせると、ドロップダウンが消えます。ul
li
Javascriptを使わずにこれを修正する方法はありますか?
こちらのデモを参照してください:http://jsfiddle.net/ba76n/2/
最近、Googleチュートリアルを使用して純粋なcssドロップダウンメニューを作成しました。
しかし、私には問題があります:
2番目のレベルに少しマージンを与えると、親とul
の間のギャップにカーソルを合わせると、ドロップダウンが消えます。ul
li
Javascriptを使わずにこれを修正する方法はありますか?
こちらのデモを参照してください:http://jsfiddle.net/ba76n/2/
padding-top
の代わりに使用してくださいmargin-top
。
それが機能しているのを見てください。http://jsfiddle.net/ba76n/5/
そのマージンにより、マウスは「マウスオーバー」状態をドロップしますが、それがないと正常に機能しません。
切り替えるとpadding-top:.5em;
、期待どおりに機能するはずです。これは、余白がブロック要素の外側にあり、パディングが内側にあるためです。
padding-top
マージンがブロックの外側に適用されるため、代わりに使用margin-top
します。サブメニューを選択しようとすると、マージンに表示され、ブロックが変更されてサブメニューが消えます。
http://jsfiddle.net/ba76n/9/フィドルを更新しました...お役に立てば幸いです:)
(ドロップダウンliからマージントップを削除し、境界線を追加しました)