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.