Question

我正在尝试在我的Wordpress主题中创建一个顶级菜单，类似于http://mailchimp.com/。正如您在此菜单中看到的，当“定价”处于活动状态时，背景将变为白色。我试图在我的菜单上实现相同的效果。

菜单背景当前有圆角：

#menu-main-menu{
    margin-top:66px;
    background: #eeeeee;

    -moz-border-radius: 5px;
    border-radius: 5px;
}

这里没有问题。

但问题出现在'Home'（菜单中的第一项）或'Contact'（菜单中的最后一项）处于活动状态时，角落不再是圆角。

显然对于'Home'我只希望左手角落圆润，而'联系'我希望右手角落圆润。这就是我现在正在尝试的内容（请参阅下面的START＆amp; 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;                                       
                }

更新根据要求发布HTML。

<ul id="menu-main-menu" class="nav">
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-15"><a href="http://www.xxxxxx.com">Home</a></li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.xxxxxx.com">Quiénes Somos</a></li>
    <li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"><a href="http://www.xxxxxx.com">Servicios</a></li>
    <li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17"><a href="http://www.xxxxxx.com">Noticias</a></li>
    <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.xxxxxx.com">Portfolio</a></li>
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="http://www.xxxxxx.com">Contact</a></li>
</ul>

任何帮助表示感谢。

问候，斯蒂芬

Answer 1

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

Answer 2

Here是您要完成的一个简单示例。

li{display:inline;}
li a{display:inline-block; padding:20px; background:red;}
li:first-child a{border-top-left-radius: 10px; border-bottom-left-radius: 10px;  }
li:last-child a{border-top-right-radius: 10px; border-bottom-right-radius: 10px;  }
li a:hover,li a.active {background: salmon;}

Answer 3

这是一个有两个例子的JSfiddle：http://jsfiddle.net/9YtfT/

第一个水平列表围绕LI的角。第二个使用A标签作为边框并对它们进行舍入。

取决于您的浏览器（我认为它是Firefox的东西），但是当存在块级子项（即A标记）的背景颜色时，舍入LI标记的边界会产生影响。因此，为了获得更清晰的效果，最好围绕A标签。

但是有两个例子。

更新

@Stephen由于这个选择器，CSS失败了：

.nav li:first-child .current_menu_item{
...
}

选择器正在第一个 LI 标记内查找 child 元素，其中包含一个名为“current_menu_item”的类。您的HTML将此类放在 LI标记上，而不是它下面。

要修复你的CSS，你需要删除空格。

.nav li:first-child.current_menu_item{
...
}

这告诉浏览器找到具有类“current_menu_item”的第一个子LI。我认为这会奏效。当然，有人问，如果你试图绕过第一个孩子，你为什么要瞄准“current_menu_item”课？你可以一起删除它。

.nav li:first-child{
...
}

更新2

我更新了JSFiddle以包含类名，以便更接近Stephen的情况：

http://jsfiddle.net/9YtfT/3/

第一个和最后一个<li>项</li>上的圆角

3 个答案: