子どものクリック時にCSSフォーカスのドロップダウンメニューが消えます

Question

ドロップダウンメニューに問題があります。サブメニューのリンクの1つをクリックしようとすると、親からフォーカスが失われ、メニューが消え、サブメニューのリンクをたどることができなくなります。私はこのフォーラムとGoogleを検索しましたが、多くの同様の問題がありますが、私は私の特定の問題の解決策を見つけることができません。私はこのことについて何か助けてくれて大変感謝しています。サイトはwww.emmatuscaloosa.comで、サブメニューは「categories」ボタンの下にあります。

Answer 1

フォーカスを使用しません。他の方法もあります。たとえば、targetまたは：hoverを使用してサブメニューを開くことができます。ターゲットを使用すると、サブメニューにIDを追加する必要があります。 ターゲット：

.sub-menu{display:none;} 
#categories:target{display:block} 

もう一つの方法は、Javascriptを使用することです。

Answer 2

私はサブメニューのホバー状態にいくつかのCSSを追加することでかなり簡単に解決しました。イム隠れ/ MAX-heightプロパティを使用してサブメニューを表示し、書き込みで問題を修正：

.SUBメニュー：ホバー{ 最大高さ：100％ }

簡単なこと！マウスがサブメニュー項目にマウスを置くと、メニューは表示されたままでなければならず、囲まれたリンクをクリックするのに十分な時間が必要です。これが問題を解決する "適切な"方法であるかどうかは分かりませんが、それは魅力的なように機能しています。あなたの貢献に感謝します。