[Пример]
Установка: 1. CSS:
Code
#menu {
background: #3e3e3e;
padding: 7px 20px 7px 20px;
text-align: center;
}
#menu a.main {
font-variant: small-caps;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 10pt;
padding: 7px;
font-family: Tahoma;
}
#menu a.main:hover {
background: #b52828;
}
#submenu {
width: 100%;
height: 20px;
background: #eee;
border: 1px solid black;
}
#submenu a {
color: black;
}
2. jQuery:
Code
$('#menu a').mouseover(function () {
if ($(this).next().hasClass('sbc')) {
$('#submenu').html($(this).next().html());
} else {
$('#submenu').empty();
}
});
3. HTML:
Code
<div id="menu">
<a href="/" class="main">
главная
</a>
<div style="display: none;" class="sbc">
<a href="">
Администрация
</a>
|
<a href="">
Контакты
</a>
</div>
<a href="/forum" class="main">
форум
</a>
<div style="display: none;" class="sbc">
<a href="">
Новости
</a>
|
<a href="">
Общение
</a>
</div>
<a href="/load" class="main">
софт
</a>
<div style="display: none;" class="sbc">
<a href="">
Скачать софт
</a>
|
<a href="">
Другое
</a>
</div>
<a href="/publ" class="main">
фильмы
</a>
<div style="display: none;" class="sbc">
<a href="">
Скачать
</a>
|
<a href="">
Посмотреть
</a>
</div>
<a href="/index/8" class="main">
профиль
</a>
<a href="/index/10" class="main">
выход
</a>
</div>
<div id="submenu">
</div>