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>