我正在尝试在我的wordpress主题中创建一个顶级菜单,类似于http://mailchimp.com/.从这个菜单中可以看到,当“定价”处于活动状态时,背景变为白色.我试图在我的菜单上实现相同的效果.
菜单背景目前有圆角：
#menu-main-menu{ margin-top:66px; background: #eeeeee; -moz-border-radius: 5px; border-radius: 5px; }@H_404_10@这里没有问题.
但是当’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; }@H_404_10@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; }@H_404_10@第一个孩子应该是一样的.当然,您需要从右到左更改属性.无论li是否是当前项目,这将始终应用圆角.如果要更改当前项的边框半径,则需要稍后在样式表中重新定义该属性.否则它将保持完全相同.
