我正在尝试在我的wordpress主题中创建一个顶级菜单,类似于http://mailchimp.com/.从这个菜单中可以看到,当“定价”处于活动状态时,背景变为白色.我试图在我的菜单上实现相同的效果.
菜单背景目前有圆角：
#menu-main-menu{
margin-top:66px;
background: #eeeeee;
-moz-border-radius: 5px;
border-radius: 5px;
}
这里没有问题.
但是当’Home'(菜单中的第一项)或’Contact'(菜单中的最后一项)处于活动状态时,问题就出现了,角落不再是圆角.
显然,对于’Home’,我只希望左手角落为圆形而对于“接触”我希望右手角落圆润.这就是我现在正在尝试的内容(请参阅下面的START& STOP之间的CSS),但它似乎并没有像我想要的那样绕过角落.
body > header .nav li a {
background: none;
text-decoration: none;
/*font-family: TitilliumText22L005,sans-serif;*/
font-family: 'Open Sans',sans-serif;
font-size: 13px;
color: #000000;
text-shadow: none;
text-transform: uppercase;
border-right: solid 1px #000000;
}
body > header .nav li:last-child a {
border-right: none;
}
body > header .nav > li.current-menu-item,body > header .nav > li.current-menu-ancestor {
background: #c4c4c4;
}
/* START: Its this bit below I'm trying to get working. */
body > header .nav li:first-child .current_menu_item{
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
body > header .nav li:last-child .current_menu_item{
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* STOP */
body > header .nav > li.current-menu-item > a,body > header .nav > li.current-menu-ancestor > a,body > header .nav > li.current-page-ancestor > a,body > header .nav > li.current_page_parent > a {
/*background: #ffffff;*/
text-shadow: none;
Box-shadow: none;
}
UPDATE
根据请求发布HTML.
任何帮助赞赏.
问候,斯蒂芬
最佳答案
您在li上设置了背景颜色,但是您将其子元素的边框四舍五入.由于li具有应用于它的背景颜色,因此您需要围绕其角落而不是li的孩子.此外,如果您希望该元素始终具有圆角,则无需应用.current-menu-item类.因此,您的部分代码应如下所示：
header .nav li:last-child{
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
第一个孩子应该是一样的.当然,您需要从右到左更改属性.无论li是否是当前项目,这将始终应用圆角.如果要更改当前项的边框半径,则需要稍后在样式表中重新定义该属性.否则它将保持完全相同.
