nickyname: Problem mit verkapselten :hover

Beitrag lesen

Hallo,

hier mein Quellcode (der große <div>-Absatz in der Mitte darin enthält das
Ziel, das ich erreichen möchte!)

Für Eure Hilfe wäre ich Euch sehr dankbar!

==========================================

<html>
<head>
  <title></title>
  <style type="text/css">

li#ebene1:hover{
        background-color:red;
    }

li#ebene2:hover{
        background-color:yellow;
    }
  </style>
</head>

<body>

<div style="border:1px solid black; background-color:Lightblue; width:50%;">
Bei :hover ueber den Punkten der 2.Ebene soll das :hover des Listenpunktes
der 1.Ebene gleichzeitig nicht mit aktiviert werden. Die Listenstruktur
darf dabei nicht veraendert werden !!! Ist das  mit einer reinen
CSS-Loesung moeglich?
</div>

<ul>
  <li id="ebene1">Menue-Punkt 1
       <ul>
           <li id="ebene2">Menue-Punkt 1.1</li>
           <li id="ebene2">Menue-Punkt 1.2</li>
       </ul>
  </li>
</ul>

</body>

</html>