CSS：导航栏中溢出的角落

Question

我正在尝试创建一个导航栏，其中隐藏子菜单，直到在对应的父菜单上盘旋。

工作正常，但导航栏的角落是

border-radius: 10px;

现在当我悬停时，悬停区域的角落没有圆角，但我想要它们 保留在导航栏的给定区域中。所以我尝试使用：

overflow:hidden;

这适用于悬停区域的角落，它们现在适合我的导航栏的圆角，但现在（相当逻辑上）我的子菜单不再显示，因为它们溢出我的导航栏（按预期），因而被隐藏。

如何确保隐藏角落溢出，但我的子菜单不是？

感谢您的帮助。

编辑：这是一个失败： http://jsfiddle.net/xznTR/5/

如果我不把溢出物隐藏在那里，那么家庭和灵感的角落就会超出导航栏的范围。这是我不想要的。

如果我确实将溢出隐藏在那里，子菜单就不会显示。

Answer 1

只需将边框半径添加到相应的列表项：

nav ul li:first-child 
{
    border-radius: 10px 10px 0 0;
}

nav ul li:last-child 
{
    border-radius: 0 0 10px 10px;
}

<强> FIDDLE

Answer 2

这是一个没有使用last-child CSS3选择器的小提琴 Fiddle

我删除了position:relative并将overflow:hidden添加到nav ul

然后我从top:100%

中删除了nav ul ul