li border-left propagating to children problem

[laith]

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

[TheDoc]

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

[laith]

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.

[Author]

Posts