#nav ul { margin: 0; padding: 0; list-style-type: none; height: 32px; } #nav ul li { float: Left; width: 152px; position: relative; } #nav ul li a { display: block; width: 130px; line-height: 30px; text-align: center; color: #FFFFFF; text-decoration: none; background-color: #EA9531; border: 1px Solid #FFFFFF; } #nav ul li a:hover { color: #333333; } #nav ul li ul { display: none; position: absolute; left: 0px; top: 32px; z-index: 100; } #nav ul li:hover ul { display: block; } #nav ul li ul a { background-color: #FFB33B; }
<div id="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a> <ul> <li><a href="#">Link 2.1</a></li> <li><a href="#">Link 2.2</a></li> </ul> </li> <li><a href="#">Link 3</a> <ul> <li><a href="#">Link 3.1</a></li> <li><a href="#">Link 3.2</a></li> <li><a href="#">Link 3.3</a></li> </ul> </li> <li><a href="#">Link 4</a> <ul> <li><a href="#">Link 4.1</a></li> <li><a href="#">Link 4.2</a></li> <li><a href="#">Link 4.3</a></li> <li><a href="#">Link 4.4</a></li> </ul> </li> </ul> </div>
Der Einsatz aller Scripte die auf dieser Seite angeboten werden geschieht auf eigene Gefahr.