Css 菜单：第一个子菜单和：悬停

我有水平菜单，两边都有

边框半径

。当每个元素处于活动状态时，其背景色为

。我使用
：first child
在第一个元素上设置背景，但是
：hover
有问题。我需要在第一个元素上悬停，半径在左上角和左下角。此时，
：悬停
是基本矩形

这是密码

ul.nav li.current-menu-item:first-child a, ul.nav li.current_page_item:first-child a {
color: #ffffff;
background: url(../gfx/menu_hover.gif) left top repeat-x;
border-top-left-radius:7px;
border-bottom-left-radius:7px;
}

您可以按如下操作：悬停菜单以获得如下所示的效果

ul.nav li.current-menu-item:first-child a:hover, 
ul.nav li.current_page_item:first-child a:hover

正如您所说，您的代码应该可以工作，但另一个问题可能是，
a
标记可能继承自其父标记：

所以你需要使用
！重要信息
在
边界半径
规则中

ul.nav li.current-menu-item:first-child a,
ul.nav li.current_page_item:first-child a {
    color: #ffffff;
    background: url(../gfx/menu_hover.gif) left top repeat-x;
    border-top-left-radius: 7px !important;     /* added !important here */
    border-bottom-left-radius: 7px !important;
}

我以前尝试过这种方式，但不起作用。你能用小提琴共享代码来检查问题吗？好的，我删除了当前的页面项目，它起作用了，但我有问题。我将hover设置为红色以显示它的外观。悬停时有一些黑暗的角落。如何摆脱它们？请看屏幕上的Ok，我删除了当前的页面项目，它可以正常工作，但我有角落的问题。我将hover设置为红色以显示它的外观。悬停时有一些黑暗的角落。如何摆脱它们？参见屏幕上的设置
边框半径：7px和
溢出：隐藏在
ul.nav
中。