Conditional hover image for navigation menus with sub menus.

[sarahl]

Hi there,

I’ve tried to search for answers to my problem but am finding it difficult to describe to a search engine exactly what it is that I am trying to do…

I have a vertical navigation bar set up and some of those main menus have sub menus and some of them don’t. At the moment it is set up so that an arrow (image) appears on rollover of all of the main menu items, but I only want this arrow to display for menu items that have a sub menu i.e. I need a conditional hover of sorts.

Here is the code that I believe needs adjusting:

#navbar li span.hover_arrow
{width: 30px;
height: 30px;
display: none;
background: url(images/menu_hover_arrow.png) no-repeat top left;
position: absolute;
top: 10px;
left: 150px;
}

#navbar li.menu-item:hover
{background: url(images/menu_hover_arrow.png) no-repeat center right;
}

#navbar li:hover ul
{display: block;}

#navbar li ul li:first-child
{border-top: none;
background: url(images/menu_hover_arrow.png) no-repeat center right;}

Thanks

[Author]

Posts