2012-04-14 3 views
1

どのようにCSSのドロップダウン(x軸)を配置することができますかと思っていた。CSSマルチレベルドロップダウンメニューの位置を次のレベル

トップレベル(あなたが置いて、これが表示されます)

  • セカンドレベル
  • セカンドレベル(ホバリング)
  • セカンドレベル

ます:現時点では、このようになります3番目のレベルがその下に表示される2番目のレベルにカーソルを合わせます。感謝:)

jsFiddle:http://jsfiddle.net/YgYtL/

答えて

1

#navMenu ul li ul li:hover ul{ 
    top : 0; 
    left : 100%; 
} 

ここにあります:http://jsfiddle.net/YgYtL/16/

+0

あなたは本当にホバー上の要素を配置したくない、それはメイン要素宣言に残すべきです。 –

+1

彼に複数の第3レベルのアイテムがある場合は、#navMenu ul ul ul liも変更して位置を削除し、表示してフロートします。現時点では、彼らは絶対的な位置のために一緒に固執する。 – dennisg

1

ターゲットそうのようなあなたのセカンドレベルのドロップダウンの幅全体、あるべき自分のセカンドレベル要素の左からあなたの第3レベルのドロップダウンや位置、それは正確に100%:

#navMenu ul ul ul { 
    left: 100%; 
    top: 0; 
} 

デモ:私はCSSでこのコードでjsFiddleを更新しましたhttp://jsfiddle.net/YgYtL/24/