2011-12-22 22 views
1

を埋めるあなたが外灰色の境界線が境界半径である見ることができるように私には、以下の画像CSSボーダー半径と背景が問題

enter image description here

などのトップメニューを持っています。しかし、選択されたホームメニューは四角形で表示されました。

私が欲しいのは、選択したホームメニューがそれに応じて埋められる必要があります。

は、ここに私のCSSコード

#navigation-wrap{width:100%; border-bottom: 1px solid #CCC;moz-box-shadow: 0px 5px 8px -2px #F5F5F5;-webkit-box-shadow: 0px 5px 8px -2px #F5F5F5;box-shadow: 0px 5px 8px -2px #F5F5F5;} 
#navigation{margin:0 auto; border: 3px solid #CCC; border-bottom:none; position:absolute; right:0; top:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 4px #EEE; -webkit-box-shadow:0px 0px 4px #EEE; box-shadow:0px 0px 4px #EEE;} 
#navigation ul{list-style:none;} 
#navigation li{float:left; display:block; letter-spacing:1px; border-bottom: 3px solid #CCC;} 
#navigation a{float:left; display:block; height: 30px; line-height:30px; position:relative; padding:0 10px; text-decoration:none; border-bottom: none;} 
#navigation a:hover {background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;} 
.current-menu-item a{background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;} 

ありがとうございます。

答えて

3

border-radiusの特性を#navigation aに追加します。

ボタンをHomeボタンにのみ適用するには、#navigation a:first-childを使用します。要素の左側のみに境界線の半径を設定する場合は、border-top-left-radiusborder-bottom-left-radiusを使用します。

+0

こんにちは、ありがとう。はい、あなたは#navigation a:first-childで提案したようにしましたが、他のメニューにも効果があります。このスクリーンショットを見てください。http://i.imm.io/dkDb.png – knightrider

+0

変更:最初-child'を ':nth-​​child(1)'に変更します。 – Purag

+0

Purmouに感謝していますが、まだ影響はありません – knightrider

0

ワードプレスで生成されたメニューの場合は、firebugなどを使用して要素を調べることで、自宅のそれぞれのメニューIDを取得できます。あなたはそれぞれのidを呼び出すことで、境界の半径のCSSを直接​​1つのメニュー要素に適用することができます

関連する問題