メガメニューの問題

StackOverflow https://stackoverflow.com/questions/4674834

質問

私は2つの問題を抱えているメガメニューを持っています。

  1. 各セクションの上にホバリングしているときに、ホバー状態をアクティブに保つことはできないようです。
  2. Megaメニューをトリガーするヘッダータグには、それらが入っているコンテナの幅があるように見えます。これにより、視覚的にロールオーバーしなくてもMegaメニューがポップアップします。

Megaメニューの現在のコードをここに投稿しました： http://www.boyga.com/mega-menu/

Hoverintentプラグインを使用しています。

役に立ちましたか？

解決

問題＃2は簡単に修正できます。このCSSルールをスタイルシートに追加します。

ul#Top-Nav {
    display: inline-block;
}

問題＃1はほぼ同じくらい簡単です。より多くのCSSの変更です。からのサブメニューの下降はからです <li>しかし、そうではありません <a>, 、関与するCSSルールを変更する必要があります a:hover と a:active:

    ul#Top-Nav li:hover a{color:#1E90FF;text-decoration:none;}
    ul#Top-Nav li:hover a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}
    ul#Top-Nav li:active a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}

これは、少なくともChromeでは私に役立ちます。あなたは（読む：おそらく）他のブラウザで問題を抱えることがあります。 :hover と :active 擬似クラスは泡立ちません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top