Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS li border-left propagating to children problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #29270
    laith
    Member

    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

    #77274
    TheDoc
    Member

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

    #77287
    laith
    Member

    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.