Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008

I am trying to show arrows on a multi-level menu (site is
http://www.sallekiss.org.uk).

Where we have a multi-level item the list structure looks like:

<ul class="menu">
 <li class="parent"><a>...</a></li>
</ul>

when the top level is closed and

<ul class="menu">
 <li class="parent active"><a>...</a>
   <ul>
     <li><a>...</a></li>
   </ul>
 </li>
</ul>

when it is open.

When we have an active, single level menu item we also have

<ul class="menu">
 <li class="active"><a>...</a></li>
</ul>

Now I can use the parent class to put an arrow on without any problem. The
questions are:

1. How do I change the arrow when we have an active parent?
2. How do I avoid putting an arrow on something that is active,
  but not a parent?

I only go to two levels, so a general case solution isn't required.