Grow your CSS skills. Land your dream job.

li border-left propagating to children problem

  • # June 7, 2010 at 2:47 pm

    Hi,

    My side navigation menu has a left border (cascading down to lighter shades of blue), which has been working great. My client just requested that hover dropdown submenu be active all the time (no more hover required). After making the subnav visible (display:block), I discovered a bug in my code. For some reason, the left border is propagating to its children causing the blue bullets to have a blue rectangle to left even though I specified border:none, and it appears that it doesn’t happen when hovering over parent or active states.

    The URL is http://axolotl.laithsinawi.com/services.html
    The blue rectangle left of the sub menu items is apparently inherited from its parent border property. Any idea what’s causing this?

    Thanks for your help.
    Laith

    # June 7, 2010 at 5:46 pm

    For example, on your "Billing Verification" nav item, this is the culprit that is cascading:

    .side-nav li.item3 a {
    border-left:6px solid #4296D2;
    }

    This will fix it:

    .side-nav li.item3 li a { border:none; }

    # June 7, 2010 at 9:15 pm

    Yes, that worked. I see it now, and that I needed more specificity by specifying the class that created the border and that my already defined .side-nav li li a { border:none; } wasn’t enough.

    Thanks again for your help.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".