html - CSS メニュー ドロップダウン ホバーの問題

Question

レスポンシブ ドロップダウン ナビゲーション リストに問題があり、親リンクからマウスをゆっくり離すと、代わりに最後の親アイテムのサブメニューが表示されます。

例を次の場所にアップロードしました: http://webe.emv3.com/aps/twelve/primary.html

[トップアップ カード] の上にカーソルを置き、マウスをサブメニューに向かってゆっくりと下に移動すると、代わりにヘルプがアクティブになります。

なぜこれが起こっているのか分かりますか？

Answer 1

その理由を突き止めました。153 ～ 156 行目の境界線に問題がありました。

.rdd-menu .submenu-panel    {
    border-radius:0 0 10px 10px;
    border:1px solid #ccc;
    border-top:0;

上の境界線が削除されていても、左、右、および下の境界線が原因で問題が発生しました。それらを削除すると解決しました。

ご協力いただきありがとうございます。ありがとうございました。

Answer 2

これ.rdd-menu .submenu-panelは、 が隠れていたり、邪魔にならないように配置されていないためです。したがって、親の上に :hover すると、すべて.submenu-panelの が引き続き表示されます。を持ってheight:0いても、要素は隠されません。

シンプルな：

.rdd-menu .submenu-panel {
   display: none;
}    

.rdd-menu li:hover > .submenu-panel {
   display: block;
}

それを修正します。身長の宣言も無視できます。

編集：トランジションがあることに気づきました。サブメニューのオフスクリーンを配置して、トランジションをそのまま維持できます。

.rdd-menu .submenu-panel {
   top: -10%;
}    

.rdd-menu li:hover > .submenu-panel {
   top: 100%;
}