Принцип работы простой, но почему-то я всё чаще сталкиваюсь с тем, что разработчики без надобости используют более сложные решения, работающие по томсму же принципу.
Стиль блока меню с выпадающим списком по умолчанию display:none; . При событии hover (курсор на родительском пункте меню), наш выпадающий список - display:blcok;. Остальное - только оформление.
Вот html разметка:
<ul class="test_menu"> <li> <a href="№">Пункт меню с выпадающим списком</a> <ul> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul>
Здесь стили нашего меню:
.test_menu{ width:300px; } .test_menu li{ list-style-type:none; position:relative; z-index:100; } .test_menu li a{ background: #CFCFCF; color: #0B3A66; text-decoration:none; display:block; font-size: 15px; line-height:38px; border-bottom:1px solid #fff; padding:0 0 0 10px; } .test_menu li a:hover{ background: #0B3A66; color: #fff; } .test_menu li ul a{ background: #F2F2F2; color: #0B3A66; } .test_menu li.active ul.small a:hover{ background: #0B3A66; color: #fff; } .test_menu li ul{ display:none; } .test_menu li:hover ul{ display:block; position:absolute; top:0px; left:300px; } .test_menu li ul li a{ width:300px; }
Такой будет результат: