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?
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.
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
.side-nav li.item3 a {
border-left:6px solid #4296D2;
}
This will fix it:
.side-nav li.item3 li a { border:none; }
Thanks again for your help.