Barra di navigazione orizzontale annidata








Codice HTML

<div id="menu">
 <!-- Lista generale -->
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Contattami</a>
 </li>
 <li><a href="#">Sezioni</a>
 <ul>
 <li><a href="#">Windows</a></li>
 <li><a href="#">Sicurezza</a></li>
 <li><a href="#">Attualità</a></li>
 </ul>
 </li>
<li><a href="#">Mi presento</a></li> </ul> </div>


Codice CSS

<style type="text/css">
#menu ul {
 padding: 0;
 margin: 0;
 z-index: 1000;
}

#menu li { position: relative; float: left; width: 140px; text-align: center; list-style: none; }

#menu li a { background-color: #454545; color: #FFF; padding: 15px 20px; text-decoration: none; display: block; }

#menu li a:hover { background-color: #0186ba; text-shadow: 0px 0px 1px #FFF; }

#menu ul ul { position: absolute; top: 48px; visibility: hidden; }

#menu ul li:hover ul { visibility: visible; }

#menu ul ul:hover { box-shadow: 0px 20px 30px #7C7C7C; }

#menu ul ul li a { background-color: #3A3A3A; }

#menu ul ul li a:hover { background-color: #0186ba; } </style>