3

角が丸いCSS3メニューに少し問題があり、それが問題の原因となっているクラスを適用する方法かどうかはわかりません。以下の例では、スペースを節約するためにコードの-moz-とバリアントを省略していますが、コードには存在していることに注意してください。-webkit-

ドロップダウン機能を可能にするためにカスタマイズされたメニューを含むタグがあり、選択したメニューを強調表示するためにも利用し<div>ています。そして、（私の経験では）初めて、IEは実際に初めて完璧に動作しましたが、FirefoxとChromeには微調整が必​​要でした。<ul>li:hover

左端のメニュー項目の状態に問題がありましli:hoverた。ホバーすると角が四角になり、「マウスアウト」の後、border-radius含まれている<ul>タグの状態にも影響しました。最初にdivタグに適用し、次にオーバーフローを非表示にすることで問題を修正できましたがborder-radius、メニュー項目にドロップダウンリストが含まれているため、表示されませんでした。したがって、左側のメニュー項目をのクラスでmenu_end設定し、border-top-left-radiusandborder-bottom-left-radiusのliandを設定して、タグli:hoverのと一致させます。これで問題は解決したと思います。border-radius<ul>

.menu_end {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.menu_end li:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

しかし、その状態で作成されたサブメニューli:hoverも、左隅が丸みを帯びたこれらのスタイルを継承していることに気づき、クリアできないようです。追加してみました：

.menu_end ul li ul li{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.menu_end ul li ul li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

なんらかの理由で機能しません。また、ネストされた<li>要素に独自のクラスを割り当ててみました。

.menu_end_drop li {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.menu_end_drop li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

どちらの方法も機能しないようです。奇妙なborder-radiusことに、場所を指定せずにスタイルを適用すると、以前は指定されていなかった2つのコーナーには影響しますが、左上と左下のコーナーには影響しません。

これは私のスタイルの順序に関係しているのではないかと思いましたが、cssファイルで後で適用されるスタイルが以前のスタイルよりも優先されることを理解しているので、少し戸惑っています。

私はこのフィドルにすべてを含めました-> http://jsfiddle.net/Z5qWe/2/

どんな助けでも大歓迎です、

幸運をお祈りしています、

ジョー

4

1 に答える 1

5

問題はこれが原因です：

.menu_end li:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

これは直接の子孫にのみ適用されます（したがって、を使用します>）。

これに置き換えます：

.menu_end > li:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

フィドル： http： //jsfiddle.net/Z5qWe/5/

于 2013-03-06T11:01:22.350 に答える