I would like to be able to affect the sidebar menu using CSS. How is this possible?

Basically, what I want to do is have a picture/graphic represent the menu 1 items (possibly menu 2) and be able to change out the image based on user interaction such as click.

I know how to accomplish the css part of setting the image, but I can figure out how to know what the id is of each menu 1 or menu 2.

Menu 1
submenu 2
submenu 2
Menu 1
submenu 2
submenu 2

Here is my sidebar.ss code:

<div id="Sidebar" class="typography">
   <div class="sidebarBox">
      
      
<ul>
   <% control Menu(1) %> <!-- Level I -->
    <li class="$LinkingMode"><a href="$Link" target="_self">$MenuTitle.XML</a><br />
    <% if LinkOrSection = section %>
    <% if Children %> <!-- Level II -->
    <ul class="submenu{$MenuCount}">
    <% control Children %>
    <li class="mlevel2"><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>
    <% if LinkOrSection = section %> <!-- Level III -->
    <% if Children %>
    <ul class="submenu{$MenuCount}">
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>    
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    </li>            
   <% end_control %>
</ul>

<div class="clear"></div>
<div id="sidebarSearch">$Searchform</div>
</div>
   
</div>