2011-12-22 75 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 2011-12-22 05:06:06

+0

更改':first -child'到':n-child(1)'。 – Purag 2011-12-22 05:08:23

+0

感谢Purmou,但还没有实现 – knightrider 2011-12-22 05:15:42

0

如果它是一个wordpress生成的菜单,你可以通过使用萤火虫或其他检查元素来获得各自的菜单ID。那么你可以通过调用其各自的ID直接应用边框半径的css到一个菜单元素