丸みを帯びたコーナートラブルでナビがドロップダウン

Question

私はhereと表示された次のnavドロップダウンで作業しました。

これは動作していますがほぼ完了していますが、私には1つの問題があります。ナビタイトルをマウスオーバーすると、テキストはカラーからブラックに変わり、ドロップダウンが表示されます。それがうまくいくはずですが、ドロップダウン内のnavタイトルに行くためにマウスを動かすと、黒いテキスト（アクティブな画像）が色に戻り、黒くなりません。

ドロップダウンがアクティブで、ユーザーがテキスト（アクティブな画像）を黒色に保つためにナビゲートしているときのご意見はありますか？

Answer 1

理想的には、メニュー項目の画像ではなくテキストを使用します。その後、JavaScriptを全く必要とせずに、CSSを使用して<li>にカーソルを置いたときのテキストの色を非常に簡単に制御できます。

ここで（画像付きで）やっているところでは、onmouseoverとonmouseoutを<a>からその上の<li>に移動することによって、まだ可能だと思います。これが動作するにはスクリプトを微調整する必要があるかもしれませんが、そのリストアイテム内のアンカータグではなく、リストアイテム全体（およびその内容）のホバリングを検出するというコンセプトが得られればうれしいです。

Answer 2

ドロップダウンメニューを含むように展開されたコンテナ（div可能性があります）にドロップダウンとともにメニューアイテムを配置してから、次のようなCSSセレクタを使用します。そのコンテナをホバーし、アイテムをドリルダウンするテキスト。それらがまだメニューまたはそのドロップダウン上にある限り、それはホバーセレクタによってカバーされなければなりません。

Answer 3

<li>にタイトルを表示するのではなく、そのタイトルが含まれている場合、CSSのot JSを使用してタイトルの色を変更することができます。