0

tt私はそのようなナビゲーションを持っています：

<ul>
   <li><a href='#'>Menu title 1</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
   <li><a href='#'>Menu title 2</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
...

次に、jqueryを使用して、ホバーされたメニュー項目のz-indexをサブメニューと同様に高く設定し、サブメニュー要素をフェードインします。したがって、ホバーされたメニュー項目要素はサブメニューの上に表示され、他のすべてのメニュー項目はサブメニューの下にあります。

次に、サブメニューのマウスイベントを設定する必要があります-mouseleave=>サブメニューを非表示にします。問題：メニュー項目がサブメニューの上にあるため-マウスがサブメニューの上に留まっているがメニュー項目1をホバーしている場合、jqueryはそれをサブメニューのマウスリーブとして認識します

それは私にとって非常に一般的な問題です。私は常にある種の「チート」を使用しますが、簡単な解決策が必要だと思います。

私は完全なソースコードを提供していませんが、動作するコードを要求することはありません。いくつかのアイデアが必要です。助けを期待して、thx。

ここに画像の説明を入力してください

4

2 に答える 2

0

より効果的でJSフリーのpureCSSメニューを使用してください。このエディターを使用して、pureCSSメニューをオンラインで生成できます。

http://purecssmenu.com/

また、これは純粋なCSSメニューの背後にある基本を説明するためのガイドです。

http://meyerweb.com/eric/css/edge/menus/demo.html

JQueryとエフェクト付きのCSSを使用したソリューションが必要な場合は、このチュートリアルが役立ちます。

http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/

お役に立てれば。

于 2012-08-22T18:47:37.370 に答える
0

純粋なCSSを使用してこれを設定する1つの方法は次のとおりです。

http://jsfiddle.net/mblase75/nr8xZ/

秘訣は:hover、リスト項目にカーソルを合わせたときにのみスタイルを表示するサブメニューにスタイルを適用することです。サブメニューも親リスト項目の一部であるため、マウスがサブメニュー上にある限り、サブメニューは表示されたままになります。また、必要に応じて、リンクやリストアイテムにjQuery/JavaScriptの双方向性を追加することもできます。

于 2012-08-22T18:53:22.023 に答える