0

Twitter Bootstrap サブメニューの左側にスペースを追加して、第 2 レベルと第 3 レベルのメニューの間に少しスペースを空けようとしています。そこで、次の追加 CSS を使用しました。

.dropdown-submenu > .dropdown-menu {
    margin: -1px 0 0 5px;
}

ただし、ユーザーがマウスをギャップの上に移動すると、サブメニューが消えます (遅くなります)。スペースを追加して、マウスオーバー中にメニューを表示し続けるにはどうすればよいですか?

ここにフィドルがあります：

http://jsfiddle.net/trxk8/5/

4

1 に答える 1

0

.dropdown-submenuこれは実際には最も美しい解決策ではありませんが、透明な 5 ピクセルの境界線で要素を埋めることができます。

これの副作用として、子のアンカー タグを少し切り詰める必要があります。

CSS

.dropdown-submenu  {
    border-right: transparent block 5px;
    margin-right: -5px;
}

.dropdown-submenu > a {
    position: relative;
    right: 5px;
    margin-left: 5px;
}

作業例: http://jsfiddle.net/trxk8/8/

margin-top: -1px注意してください、あなたはまだ入っているでしょう.dropdown-submenu > .dropdown-menu

于 2013-01-06T22:49:21.307 に答える