1

I want to create this menu where on hover a dropdown menu appears and normally I would have no trouble doing this setting the UL to top:100%. However this time I need it to be further down but it needs to be precised so it is cross browser friendly. So what I tried is to set a margin-top:17px to the UL container to push it away from the top and that works but as soon as I hover over it, the dropdown closes. I added a RED border in the example to show where I would like the dropdown UL top to start.

Please have a look -> Link to example

4

3 に答える 3

1

padding-top代わりに使用する必要がありますmargin-top（マージンが要素の外側にあり、ホバーイベントを中断するため）：

#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;}

#main-nav ul ul li {background-color:#000;opacity:0.8;filter:alpha(opacity=80);}

また、アイテムを目的の位置に移動するため、背景宣言をからに移動する必要がありますulが、背景が正しく表示されません（親のすぐ下）。lipaddingli

于 2012-06-03T20:51:31.657 に答える
0

次のように変更margin-topしてみてくださいpadding-top-http ://jsfiddle.net/BZpLf/2/

#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;background-color:#272727;opacity:0.8;filter:alpha(opacity=80);}

また、背景色がからに変更さ#000れます#272727

于 2012-06-03T20:51:18.617 に答える
0

margin-top（背景設定を変更する必要があります）に置き換える代わりに、スペーサー要素を追加して、親とドロップダウンpadding-topの間のギャップを埋めます。私のデモを参照してください。liul

の前に余分な (空の) div があることに注意してくださいul。

または、余分な要素を追加したくない場合は:after、親li a要素で疑似セレクターを使用します。私の2 番目のデモを参照してください。追加の CSS は次のとおりです (それだけです。これ以上変更する必要はありません)。

#main-nav > ul > li:hover > a:after { 
  content: ""; 
  display: block; 
  min-height: 17px;
  position: absolute;
  top: 100%;
  left:0;
  min-width:150px;
}
于 2012-06-03T20:56:43.257 に答える