CSS Navagation Problem

HTML & CSS
1

I know I’m just messing up with the selectors but I’m having a problem with a vertical navigation.

The site is: http://www.opolaw.com/

On the left side there is a vertical navigation called Key Practice areas.

The very first one has a sub-menu. And I put in a little arrow to show that. However when you mouse over that area the submenu appears, but the little arrow shows up on those as well.

I just figure out how I can set it so that the arrow shows on an item that has a sub nav (as it does) but NOT show on the sub items.

EDIT TO ADD: I also just noticed that the arrow doesn’t appear at all in IE 8

Thanks for any advice.

Daniel

2

Perhaps something like:

ul.sub-menu > li > a {background: none;}

I’m guessing the .sub-menu li a elements are picking up the background from #menu-practice-areas li a, or something like that. Better eyes/minds than mine will pick it up, I’m sure.

3

Thanks Moretea,

That worked. But it is still on the sub nav hover. I tried adding:

#nav_menu-3 ul.sub-menu > li > a:hover {
background-color:#270707 !important;
}

But it still pulls the arrow image. Any ideas?

Thanks,
Daniel

4

You really want that arrow to appear wherever the list item has another child UL. So it seems to work fine to me, except that the very lowest level list items (with no child ul) also are showing the arrow. This is because they have the hasChild class on them. So perhaps just remove that class from those lowest level list items.

5

Thank you very much. I got the issue resolved. Just had some missing >