я однажды реализовывал подобное меню. там смысл достаточно прост: делаем обычное навигационное меню. раз меню выпадающее - делаем первый и второй уровень (допустим). первый уровень отображается всегда, а вот второй скрываем с помощью display: none;
. при наведении на определённый пункт меню первого уровня через псевдокласс :hover
отображаем ссылки второго уровня.
тут правильно задать позиционирование для второго уровня. а также очень важно (это проблема заставила меня долго мучаться) задать для пункта, при наведении на который будет появляться подменю, padding
по-больше. чтобы площадь реагирования на наведение увеличить.
Для большей наглядности мой код HTML (упрощённый):
<!DOCTYPE html PUBLIC "-//W3C/DTD//XTHML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtm1" xml:lang="en" lang="ru">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul id="main_nav">
<li><a href="#">О компании</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Все виды оценки</a></li>
<li><a href="#">Автоэкспертиза</a></li>
<li><a href="#">Автострахование</a></li>
<li><a href="#">Юридические услуги</a></li>
</ul><!--end sub_nav-->
</li>
<li><a href="#">Тарифы</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul><!--end main_nav-->
</body>
</html>
И код CSS (тоже упрощён):
#main_nav {
position: relative;
top: 15px;
margin-top: 14px;
margin-left: 280px;
}
#main_nav li{
display: inline;
padding: 0 8px;
border-left: 1px dotted #8b6619;
position: relative;
z-index: 2;
}
#main_nav li:first-child, #main_nav ul li {
border-left: none;
}
#main_nav ul {
display: none;
position: absolute;
top: 19px;
left: 0;
z-index: 1;
width: 155px;
}
#main_nav li a, #main_nav li ul li a{
color: #8b6619;
font-family: "Times New Roman", serif;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
outline: none;
padding-bottom: 17px;
}
#main_nav li a:hover,
#main_nav li ul a:hover {
color: black;
}
/*--------------Подменю--------------*/
#main_nav li:hover ul {
display: block;
}
Вот и всё. Спасибо за голоса!)