css – First和Last>项目上的圆角

我正在尝试在我的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.

nes Somos

任何帮助赞赏.

问候,斯蒂芬

最佳答案

您在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是否是当前项目,这将始终应用圆角.如果要更改当前项的边框半径,则需要稍后在样式表中重新定义该属性.否则它将保持完全相同.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。