armanisimo: Ein-/Ausblendung des Menus

Ich bitte um dringende Hilfe.
Ich habe den folgenden Code für eine Navi. Die zweite Ebene soll ausklappbar sein. Das funktioniert schon, aber sobald der Mauszeiger z.B nicht mehr auf dem Link 2 ist, geht alles zu. Ich möchte, dass die zweite Ebene des Links 2 offen bleibt, bis man auf einen anderen Link klickt.
Ich bitte um Ihre Hilfe. Ich bin mit CSS noch nicht ganz fit. Vielen Dank

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
font: normal 60% Helvetica, Arial, sans-serif;
color: black;
background-color:#CCCCCC;
text-align:right;
}
ul#Navigation {
margin: 2em;
padding: 0.8em; /*Peripherie-Abstände*/
}
ul#Navigation li {
list-style: none;
margin: 0.3em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
}
ul#Navigation a {
display:block;
padding: 0.1em;
text-decoration: none;
color:#333333;
}
ul#Navigation a:hover {
color: Black;
background-color: white;
}
ul#Navigation a:active {
font-weight:bold;
color: Black;
}
/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Navigation li>ul {
display: none;
top: 1.6em;
}
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
display: block;
}
/* Workaround fuer den IE 7 */
*:first-child+html ul#Navigation ul {
padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block;  /* Unternavigation in modernen Browsern einblenden */
}
</style>
</head>
<body>
</head>
<body>
<ul id="Navigation">
  <li><a href="#">LINK 1</a></li>
  <li><a href="#">LINK 2</a>
    <ul>
      <li><a href="#">Unterseite 1</a></li>
      <li><a href="#">Unterseite 2</a></li>
      <li><a href="#">Unterseite 3</a></li>
    </ul>
  </li>
  <li><a href="#">LINK 3</a></li>
  <li><a href="#">LINK 4</a>
    <ul>
      <li><a href="#">Unterseite 1</a></li>
      <li><a href="#">Unterseite 2</a></li>
      <li><a href="#">Unterseite 3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
</body>
</html>