2012-03-01 71 views
1

私はいくつかの単純なCSSボタンのために取り組んでいるプロジェクトを持っていて、それらのドロップダウンメニューを一致させようとしていました。問題は、サブメニュー内の項目をクリックすると、その上にあるすべての親がアクティブ状態になることです。私は親セレクタを使うつもりだったが、それらは存在しない。デモページはhttp://jsfiddle.net/td7bk/4/です。CSSドロップダウンメニュー(子要素があるときに親要素がアクティブになるのを止める)

ありがとうございます!

編集:今のところ、デモは-moz-transitionと-moz-box-shadowプロパティとborder-radiusプロパティを使用しているため、Firefoxと完全に互換性があります。

+0

私はあなたが何らかのjavascriptなしでそれを行う方法を見ません。選択したすべてのボタンに技術的にカーソルを合わせ、すべて同じクラスをクリックしているため、技術的にすべてをクリックするためです。多分レベル間のクラスを分割しますか? – tedski

+0

.anibuttonにトランジションを入れないでください。すべての親がクラスを持っているので、彼らはすべて移行します。代わりに内容に適用してください(ラップする必要があります)。 – mrtsherman

+0

誰もが簡単に使うことができるコードを作ろうとしていましたが、リストの各レベルを違うクラスにする必要がありました(スタイルを設定して表示と非表示を制御する必要があります)。また、私はそれが動作するとは思わない。私は他のドロップダウンメニューのCSSコードを見てきましたが、間違いなく私の問題はありません。私は理由を理解できません。 – Ian

答えて

0

これは、あなたのhtmlをちょっとした調整をしたいと思っている場合にのみ可能です。私はいくつかのli要素にテキストをラップするスパンタグを持っているが、それらのすべてではないことに気づいたので、これが必須かどうかはわかりませんでした。例:http://jsfiddle.net/td7bk/8/

また、クイックヒントの気分になっている場合は、調整されたCSSセレクタをご覧ください。簡素化され、より効率的です。

希望すると便利です。

+0

ありがとう!テキストを動かすためにスパンが必要です。私は間違いなくそれを使用しています。 – Ian

関連する問題