メニュー：ファーストチャイルド：とホバー

Question

私はborder-radiusと両側に水平メニューを持っています。各要素がアクティブなときはbackground-colorです。 :first-childを使って最初の要素の背景を設定しましたが、:hoverに問題があります。左上と左下に半径のある最初の要素のホバーが必要です。現時点では:hoverが基本矩形です。

ここでコード

ul.nav li.current-menu-item:first-child a, ul.nav li.current_page_item:first-child a { 
color: #ffffff; 
background: url(../gfx/menu_hover.gif) left top repeat-x; 
border-top-left-radius:7px; 
border-bottom-left-radius:7px; 
} 

Answer 1

だあなたは従うことができます。下図のような効果を得るために、メニューのためにホバー。

ul.nav li.current-menu-item:first-child a:hover, 
ul.nav li.current_page_item:first-child a:hover 

Answer 2

あなたが言っているようあなたのコードは、動作するはずですが、それは親だからもう一つの問題はaタグが継承することができるということがあります。

だからあなたはborder-radiusルールで!importantを使用する必要があります...

ul.nav li.current-menu-item:first-child a, 
ul.nav li.current_page_item:first-child a { 
    color: #ffffff; 
    background: url(../gfx/menu_hover.gif) left top repeat-x; 
    border-top-left-radius: 7px !important;  /* added !important here */ 
    border-bottom-left-radius: 7px !important; 
}