CSS * {
margin:0; padding:0; } #nav { font-size:0.7em; list-style-type:none; width:600px; height:25px; display:inline-block; background:#355C96; line-height:25px; } #nav li{ float:left; width:120px; margin-top:-10000px; } #nav li a { width:120px; text-decoration:none; text-align:center; color:#fff; position:relative; float:left; margin-right:-119px; margin-top:10000px; } #nav li a:hover, #content #nav li a:focus, #content #nav li a:active { background:#DCE2FC; margin-right:0; color:#355C96; } #nav li ul { background:#6286BD; float:left; margin-top:-25px; padding-top:25px; margin-bottom:-10000px; list-style-type:none;
}
HTML-код: <div class="center"> <ul id="nav"> <li><a href="">Меню 1</a> <ul> <li><a href="">Подменю 1</a></li> <li><a href="">Подменю 2</a></li> <li><a href="">Подменю 3</a></li> </ul> </li> <li><a href="">Меню 2</a> <ul> <li><a href="">Подменю 1</a></li> <li><a href="">Подменю 2</a></li> <li><a href="">Подменю 3</a></li> </ul> </li> <li><a href="">Меню 3</a> <ul> <li><a href="">Подменю 1</a></li> <li><a href="">Подменю 2</a></li> <li><a href="">Подменю 3</a></li> </ul> </li> <li><a href="">Меню 4</a></li> <li><a href="">Меню 5</a></li> </ul> </div>
#nav li ul li { float:none; margin:0; width:auto; } #nav li ul li a { float:none; display:block; margin:0; margin-right:-1px; background:#6286BD; }
Источник: http://jemand.ru/horizontal-drop-down-menu/comment-page-1/#comment-265 |