CSS下拉菜单 - 仅半径远左边和右边

Question

希望对某人来说这是一件容易的事。我已经构建了一个CSS下拉菜单，并且想要添加一个半径以围绕整个菜单的角落。我用过：

border-radius: 0px; 

...添加半径，但是我必须把它放在错误的地方，因为它轮流显示每个菜单选项。我尝试过不同的位置，但无法弄清楚如何对它进行排序。

我已经把它的jsfiddle这里：http://jsfiddle.net/Flamin_Squirrel/noxqn7z4/6/

感谢。

Answer 1

你可以做这样的事情：http://jsfiddle.net/zbwz0jxo/

使用伪类第一的孩子，最后孩子，象下面这样：

.menu > ul >li:first-child { 
    border-radius: 5px 0px 0px 5px; 
} 

.menu > ul >li:last-child { 
    border-radius:0px 5px 5px 0px; 
} 

这将允许你只应用于您的边界半径仅限于菜单的第一个和最后一个列表项。

欲了解更多有关第一个孩子和最后一个孩子伪类的信息，请查看MDN here和here。这与伪类（如nth-child）相结合，将为您的CSS选择器提供更好的纹理控制。

Answer 2

您应该将边框半径代码放在.menu之内，因为那是您想要圆角的元素。

Answer 3

加入这个（和删除现有的边界半径规则）：

.menu > ul > li:first-child { 
    border-radius: 10px 0 0 10px ; 
} 
.menu > ul > li:last-child { 
    border-radius: 0 10px 10px 0; 
} 

jsFiddle example