マウスがホバーを移動するとドロップダウンリストが消えます

Question

私はwordpress.comでブログを開いていて、メインナビゲーションのドロップダウンボックスに問題があります。

マウスが上に乗ると表示されますが、外に出るとリンクがクリックされます。

相続人のブログ： 'ワークショップ' のhttps://readingartlab.wordpress.com/

ドロップダウンメニュー。この問題は、margin-top: 11%;を追加して、その下のルールに合わせる場合に発生します。

助けが必要ですか？前もって感謝します。

EDIT：これは変更されているCSSがある

：

.main-navigation ul ul { 
    padding: 8px 0; 
    margin-top: 11%; 
} 

Answer 1

あなただけの子アイテムを持つものを対象とした場合、あなたの親メニュー項目の下 .menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; }

に少しパディングを追加 - .menu-項目が-子供を持っている - それは影響しません他のメニュー項目。負のマージン - ボトムは、パディング - ボトムの追加によって生じるメニュー領域の広がりを相殺する。 >セレクタを使用すると、「menu-item-has-childrenのものの1つのレベルの深さの直接の子孫である<a>要素を対象にします。 （だからあなたの余分なパディングがあなたのサブメニュー上の間隔/パディングには影響しません。）

これはCSSで子供と兄弟セレクタについての素晴らしい記事です - 私は、これらのコードは、問題を解決することを願っていますCSS Tricks: Child and Sibling Selectors

Answer 2

ので、ここでの問題は、あなたの.menu-itemに専念スペースの設定量があるということです - あなたは上にマウスを移動するときそれはサブメニューをトリガーしますが、サブメニューに移動するために、マウスは実際にはホバー効果をトリガーするスペースを離れています。 Chromeデベロッパーツールでは、あなたがHTMLウィンドウでワークショップのためのリスト項目をクリックすると、リスト項目の周りで正確にどのくらいのスペースを参照してください。

理想的

、あなたはそのためにCSSを再構成します全体のナビゲーションエリアには、リストアイテムの周りに多くのパディングがあります。

ドロップダウンキャレットがjQuery経由で使用するfocusクラスをトリガーすることもできますが、同じ問題のいくつかが実行され、別の場所をクリックするか設定するまでサブメニューを開いたままにする必要がありますヘッダーのように大きな親要素のmouseleaveを削除すると、これはかなりうんざりです。

Answer 3

要素の余白にカーソルを移動することはできません。代わりに、パディングまたはボーダーを使用して、親の子要素の間のギャップを埋めることができます。

この最小限のデモをjsfiddleでご覧ください。

ul.menu > li { 
    display:inline-block; 
    padding:5px; 
} 

ul.menu > li > ul { 
    display:none; 
    border-top:5px solid $navigation-background-color; 
    margin:5px -5px -5px; 
} 
ul.menu > li:hover > ul { 
    display:block; 
} 

ul.menu > li > ul > li { 
    display:block; 
    padding:5px; 
} 

Answer 4

。

.site-header { 
    border: 0; 
    padding-bottom: 0; 
} 
.search-navigation { 
    border-top: 0; 
    margin-bottom: 0; 
} 
@media screen and (min-width: 960px) { 
    .search-navigation { 
     margin-top: 30px; 
     padding-top: 0; 
     border-top: 1px solid #cecece; 
     border-bottom: 1px solid #cecece; 
    } 
} 
.main-navigation li { 
    padding: 15px 0; 
    border: 0 !important; 
} 
@media screen and (min-width: 960px) { 
    .main-navigation .menu-item-has-children { 
     padding-right: 0; 
    } 
} 
.main-navigation .menu-item-has-children > a { 
    padding-right: 38.5px; 
} 
.main-navigation a { 
    display: block; 
    padding: 0 15px; 
    border-right: 1px solid #e0e0e0; 
} 
.main-navigation>div>ul>li:last-child a { 
    border: 0; 
} 

あなたがホバーをトリガするために使用しているサブメニューと<リーとの間に隙間が>あったのでそれは起こっていました。visual