CSS:导航栏中的溢出 Angular

Question

我正在尝试制作一个导航栏，其中的子菜单在悬停在相应的父菜单上之前是隐藏的。

效果很好，但是我的导航栏的 Angular 是圆的

border-radius: 10px;

现在当我悬停时，悬停区域的 Angular 不是圆的，但我希望它们是 留在导航栏的给定区域。所以我尝试使用:

overflow:hidden;

这适用于悬停区域的 Angular ，它们现在适合我的导航栏的圆 Angular ，但现在(非常合乎逻辑)我的子菜单不再显示，因为它们溢出了我的导航栏(如预期的那样)，因此是隐藏的。

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

感谢您的帮助。

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

如果我不把 overflow:hidden 放在那里，home 和 inspiration 的 Angular 落就会超出导航栏的范围。这是我不想要的。

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

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