Przykład online: [CSS] Rozwijane menu
Kod XHTML
<ul id="menu">
<li> <a href="#" title="">Łącze 1</a> </li>
<li> <a href="#" title="">Łącze 2</a> </li>
<li> <a href="#" title="">Łącze 3</a>
<ul>
<li> <a href="#" title="">Subłącze 1</a> </li>
<li> <a href="#" title="">Subłącze 2</a> </li>
</ul>
</li>
<li> <a href="#" title="">Łącze 4</a>
<ul>
<li> <a href="#" title="">Subłącze 1</a> </li>
<li> <a href="#" title="">Subłącze 2</a> </li>
</ul>
</li>
</ul>
Kod CSS:
a { text-decoration: none; font-family: Gill Sans, Verdana; color: #eee; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; }
ul#menu li { list-style-type: none; float: left; }
ul#menu li a { display: block; padding: 8px; color: #000; }
ul#menu li li a { width: 160px; padding: 6px 12px; color: #000; font-size: 14px; }
ul#menu li li:hover { text-decoration: underline; }
ul#menu li ul { overflow: hidden; display:none; }
ul#menu li:hover ul { margin-left: 10px; position: absolute; padding: 0px; border: 1px solid #000; display: block; width: 150px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }