Vysúvacie menu v CSS a JavaScripte

Vysúvacie menu v čistom CSS pre každý prehliadač som ešte nikde nevidel a zatiaľ asi nie je spôsob ako ho vytvoriť, ak áno skúste ma opraviť v komentároch. Moje vysúvacie menu bude využívať komponent hover.htc, ktorý hover efekt bude emulovať (pre MSIE).

Súbor si musíte stiahnuť na adrese http://users.hszk.bme.hu/~hj130/css/list_menu/hover/.

Zdrojový kód CSS pre menu:

* { margin:0; padding:0; color:#444444; font-weight:bold; }

ul#menu a { display:block; }
ul#menu { list-style-type:none; }
ul#menu li { display:block; float:left; }
ul#menu li a { padding:0.25em 1em 0.25em 1em; border:1px solid #cccccc; background:#efefef; text-decoration:none; }
ul#menu li a:hover { background:#f4f4f4; }
ul#menu li ul { display:none; }
ul#menu li ul li { display:block; float:none; border:1px solid #cccccc; }
ul#menu li ul li a { border:0; background:#efefef; }
ul#menu li ul li a:hover { color:#ffffff; background:#003366; }

/* zahrnutie a využitie komponentu hover.htc */
li { behavior:url('hover.htc'); }
ul#menu li:hover ul, ul#menu li.hover ul { display:block; position:absolute; }

Zdrojový kód XHTML pre menu:

<ul id='menu'>
  <li><a href=''>Nové menu</a>
    <ul>
      <li><a href=''>Hlavná stránka</a></li>
      <li><a href=''>Zoznam rubrík</a></li>
      <li><a href=''>Download</a></li>
      <li><a href=''>Download</a></li>
      <li><a href=''>Weblinks</a></li>
    </ul>
  </li>
  <li><a href=''>Nová navigácia</a>
    <ul>
      <li><a href=''>Hlavná stránka</a></li>
      <li><a href=''>Zoznam rubrík</a></li>
      <li><a href=''>Download</a></li>
      <li><a href=''>Weblinks</a></li>
    </ul>
  </li>
  <li><a href=''>Staré menu</a>
    <ul>
      <li><a href=''>Hlavná stránka</a></li>
      <li><a href=''>Zoznam rubrík</a></li>
      <li><a href=''>Download</a></li>
      <li><a href=''>Weblinks</a></li>
    </ul>
  </li>
  <li><a href=''>Vedlajšie menu</a>
    <ul>
      <li><a href=''>Hlavná stránka</a></li>
      <li><a href=''>Zoznam rubrík</a></li>
      <li><a href=''>Download</a></li>
      <li><a href=''>Weblinks</a></li>
    </ul>
  </li>
</ul>

Výsledok si môžete prezrieť na tejto adrese.