Html CSS3带边框半径和li的li菜单：悬停

我对带有圆角的CSS3菜单有点问题，我不确定是不是我应用类的方式导致了我的问题。请注意，在下面的示例中，为了节省空间，我省略了代码的

-moz-

和

-webkit-

变体，但它们存在于我的代码中

我有一个

标签，其中包含一个定制的

菜单，允许使用下拉功能，并且还利用

li:hover

突出显示所选菜单。而且，在我的经历中，IE第一次真正做到了完美无瑕，而Firefox和Chrome需要一些调整

我对我最左边菜单项的

li:hover

状态有问题，因为当它悬停时，它在角落处成正方形，然后在“mouseout”之后，它也影响了包含

标记的

边框半径。我可以通过先将
边框半径
应用于div标记，然后隐藏溢出来解决这个问题，但是由于菜单项包含下拉列表，因此没有显示它们。因此，我使用
menu\u end
类设置左侧菜单项，并设置
li
和
li:hover
的
边框左上半径和
边框左下半径，以匹配
标记的
边框半径，我认为这已经解决了问题

.menu_end {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.menu_end li:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

然而，我注意到在
li:hover
状态中创建的子菜单也继承了这些左圆角样式，我似乎无法清除它们。我尝试添加：

.menu_end ul li ul li{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.menu_end ul li ul li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

因为某种原因，它不起作用。我还尝试将嵌套的
元素分配给它们自己的类：

.menu_end_drop li {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.menu_end_drop li:hover {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

这两种方法似乎都不起作用，奇怪的是，如果我只对
边界半径
应用样式，而不指定位置，它会影响之前未指定的两个角，但不会影响左上角和左下角

我认为这可能与我的样式顺序有关，但我的理解是，css文件中稍后应用的样式将取代以前的任何样式，所以我有点不知所措

我已经把所有的东西都包括在这把小提琴里了->

非常感谢您的帮助

致以最良好的祝愿

Joe
问题在于：

.menu_end li:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

这应该只适用于直系后代（因此我们使用
）

将其替换为以下内容：

.menu_end > li:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

小提琴：
@JoeP没有问题：）。很高兴我能帮忙。