CSS menu element inheritance issue

applying a class to specific elements

[pelegr]

Greetings,

This is my first post here so here it goes...

I am styling a menu I have built and have encountered a slight problem:
The menu is an unordered list with 3 levels of items.
I am building it dynamically, and every element that has sub items currently hidden, gets a sub_items_exist class.

for example:

<ul>
 <li><a href="somelink1">link1</a>
<ul>
  <li class="sub_items_exist"><a id="link1.1" href="somelink1.1">link1.1</a>
 <ul>
  <li><a id="link1.1.1" href="#">link1.1.1</a></li>
 </ul>
 </ul>
 </li>
</ul>

The sub_items_exist class is activated on anchors as follows:

.sub_items_exist a
{
background-image: url('someurlpath');
}

The problem: I want the class style to be applied only to the parent element (meaning the link1.1 anchor), and not to all nested elements as is currently happening (currently it is affecting the link1.1.1 anchor as well).

I'm sure there is a way to accomplish this, if not several.

Thanks in advance.

[pelegr]

The issue has been solved using the > child selector :)
as shown here:

.sub_items_exist >a
{
background-image: url('somepic');
}

However, I would like to know how to affect the hover state of this same item. tried this but it didn't work:

.sub_items_exist >a:hover
{
background-image: url('somepic');

}