Cascading <li>-hover effect using CSS [duplicate]

Question

I have got an simple html unordered list.

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

I want to use CSS to make a simple effect when the mouse is over an Item or a Group.

li:hover
{
    background-color:#ff0000;
}

It works quite fine for "Group 1" or "Item 1" (not contained in a group) - When I'm moving the mouse over the color changes. But if I move over "Item 2" or "Item 3" "Group 1" also remains hightlighted (red background). In this case I only want to highlight "Item 2" or "Item 3".

Has anyone an idea how to do this?

Thanks for your help!

=============================== EDIT

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Group 2
                <ul>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Mouse Over xxx should highlight yyy
xxx -> yyy
Item1 -> Item1
Group1 -> Group1, Item2, Group2, Item3, Item4
Item2 -> Item2
Group2 -> Group2, Item3, Item4
Item3 -> Item3
Item4 -> Item4

Please see http://image-upload.de/image/r76d79/1c7af56a19.png ,just a quick drawing.

Answer 1

This solution isn't a purely HTML/CSS one, but it works. It uses the Javascript library jQuery.
http://jsfiddle.net/XP3Vp/

Put this in the head-section of your page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$('li').mouseover(function()
  {
          if ($('li ul li:hover').length) 
          {
              $('li ul li:hover').css('background','red'); 
          }
          else
          {
               $('li:hover').css('background','red'); 
          }
  });
$('li').mouseout(function()
  {
          $(this).css('background', 'transparent');
  });
</script>

Use this if you don't want the underlying list items to be highlighted as well when moving the cursor over Group 1: http://jsfiddle.net/CwhhN/

Answer 2

The best you can do is to colorize the ul as well ..

ul{background-color:#fff;}
li:hover
{
    background-color:#ff0000;
}

something like this http://jsfiddle.net/gaby/DxsDa/ although it will still highlight the group 1 text..

---

Alternatively you can resort to invalid html but i would not suggest that for obvious reasons.. http://jsfiddle.net/gaby/DxsDa/1/