CSS3 li菜单包含border-radius和li：hover

Question

I'm having a bit of an issue with a CSS3 menu with rounded corners, and I'm not sure if it's the way I'm applying my classes that are causing my issue. Please note that in my examples below I have omitted the -moz- and -webkit- variants of the code in order to save space, but they are present in my code.

I have a <div> tag containing a customised <ul> menu, to allow drop down functionality and am also utilising li:hover to highlight the menu selected. And, for the first time ever (in my experience), IE actually worked flawlessly first time whereas Firefox and Chrome required some tweaking.

I was having an issue with the li:hover state of my far left menu item, as when it was hovered it squared off the corners and then after the 'mouseout' it also affected the border-radius of the containing <ul> tag. I was able to fix the issue by applying the border-radius to a div tag first and then hiding the overflow, however as the menu items contained drop-down lists they were not being displayed. I therefore set the left menu item with a class of menu_end and set the border-top-left-radius and border-bottom-left-radius of the li and li:hover to match the border-radius of the <ul> tag, which I thought had fixed the problem.

.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;
}

However, I've noticed that the sub-menu that is created in the li:hover state has also inherited these style with rounded left corners, and I can't seem to clear them. I've tried adding:

.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;
}

Which for some reason doesn't work. I've also tried assigning the nested <li> elements their own class:

.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;
}

Neither method seems to work, and strangely if I apply a style to just border-radius without specifying a location, it effects the two previously unspecified corners but not the top left and bottom left corners.

I thought this might be to do with the order of my styles, but my understanding is that and styles applied later in a css file supersedes any previous styles, so I'm at a bit of a loss!

I've included everything in this fiddle -> http://jsfiddle.net/Z5qWe/2/

Any help is greatly appreciated,

Best Wishes,

Joe

Answer 1

The issue is because of this:

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

This should only apply to direct descendants (so we use > ).

Replace it with this:

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

Fiddle: http://jsfiddle.net/Z5qWe/5/