menu rozwijane, lista Opcje

[melior]

Witam,

Zapożyczyłem prosty kod dla menu rozwijanego.
Efekt wygląda tak

Nie mam pojęcia jak zrobić by po najechaniu na element Menu, podświetlał się (zmieniał kolor na czarny) i by nadal taki pozostawał kiedy zjadę na jedną z opcji.
Czy może ktoś kuknąć na kod poniżej? Zapewne to prosta sprawa, ale z css u mnie jeszcze słabiutko.

Z góry dziękuję za pomoc.

[HTML] pobierz, plaintext 
<ul id="menu">
  <li><a href="#" title="">Menu1</a></li>
  <li><a href="#" title="">Menu2</a>
    <ul>
      <li><a href="#" title="">Opcja1</a></li>
      <li><a href="#" title="">Opcja2</a></li>
      <li><a href="#" title="">Opcja3</a></li>
      <li><a href="#" title="">Opcja4</a></li>      
    </ul>
  </li>
  <li><a href="#" title="">Menu3</a></li>
  <li><a href="#" title="">Menu4</a></li>
  <li><a href="#" title="">Menu5</a></li>  
</ul>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#menu{
  overflow: hidden;
  background: #FFF;
  padding: 6px 15px;
  color: #101010 ;
}
 
#menu:hover{
  overflow: hidden;
  background: #FFF;
  padding: 6px 15px;
  color: #101010 ;
}
 
ul#menu li{
  list-style-type: none;
  float: left;
}
 
ul#menu li a{
  display: block;
  padding: 0px 6px 0px 6px;
  color: #A0A0A0;
  text-decoration: none;
}
 
ul#menu li li a{
  width: 180px;
  padding: 8px 6px;
  color: #000000 ;
}
 
ul#menu li li:hover{
  background: #CCF;
}
 
ul#menu li ul{
  overflow: hidden;
  display:none;
 
}
 
ul#menu li:hover ul{
  position: absolute;
  background: #FFF;
  padding:5px 0px 0px 0px;
  border:0px solid #999;
  display: block;
  width: 100px;
  text-align: left;
}
[HTML] pobierz, plaintext 

[nmts]

[HTML] pobierz, plaintext 
 
#menu{
  overflow: hidden;
  background: #FFF;
  padding: 6px 15px;
  color: #101010 ;
}
 
#menu:hover{
  overflow: hidden;
  background: #FFF;
  padding: 6px 15px;
  color: #101010 ;
}
 
ul#menu li{
  list-style-type: none;
  float: left;
  color: grey; // koloruje za pomocą li, nie a
}
 
ul#menu li:hover { // i zmieniam kolor
background: #000000;
}
 
ul#menu li a{
  display: block;
  padding: 0px 6px 0px 6px;
  color: inherit; // przejęcie wartosci rodzica, czyli li lub li:hover
  text-decoration: none;
}
 
ul#menu li li a{
  width: 180px;
  padding: 8px 6px;
  color: #000000 ;
}
 
ul#menu li li:hover{
  background: #CCF;
}
 
ul#menu li ul{
  overflow: hidden;
  display:none;
 
}
 
ul#menu li:hover ul{
  position: absolute;
  background: #FFF;
  padding:5px 0px 0px 0px;
  border:0px solid #999;
  display: block;
  width: 100px;
  text-align: left;
}
 
[HTML] pobierz, plaintext 

Jeśli ma to działać na IE musisz użyć javascript..