Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 li Menu with border-radius and li:hover

CSS3 li Menu with border-radius and li:hover

Problem

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

tag containing a customised
    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

      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
        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

      • 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

        Problem courtesy of: JoeP
      • Solution

        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/

        Solution courtesy of: mattytommo

        Discussion

        View additional discussion.



        This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

        Share the post

        CSS3 li Menu with border-radius and li:hover

        ×

        Subscribe to Css3 Recipes - The Solution To All Your Style Problems

        Get updates delivered right to your inbox!

        Thank you for your subscription

        ×