Простое горизонтальное субменю на CSS
Зачастую для отображения субменю (или иначе — выпадающее меню) используют вложенные списки. Хотя на самом деле можно обойтись всего лишь одним списком <ul></ul>, а пункты субменю сделать в виде вложенных в один пункт списка ссылок. Верхняя ссылка будет соответствовать заглавному пункту, а все остальные, невидимые изначально (используется свойство display: none;), будут отображать пункты субменю.
Принцип тут довольно прост: все пункты субменю взяты в тэг <span></span>, которому мы зададим ряд свойств.
Во-первых, как я уже сказал, эти пункты изначально невидимы (свойство display: none;).
Во-вторых, пункты субменю вытянуты в линию и разделены вертикальной чертой | что придает визуально сходство с основным меню.
В-третьих, блок span при помощи абсолютного позиционирования position: absolute; и сдвига на 35 пикселей от верха top:35px; размещается как раз под основным меню. Причем при помощи одноцветного фона для выбранного основного пункта и самого субменю задается визуальное соответствие.
Ниже приведен весь код страницы.
<html>
<head>
<style type="text/css">
* {
border: 0;
padding: 0;
margin: 0;
}
#nav {
float: left;
width: 500px;
list-style: none;
position: relative;
}
#nav li {
float: left;
border-right: 1px solid #999;
}
#nav li a {
padding: 10px 15px;
display: block;
color: #00c;
text-decoration: none;
}
#nav li a:hover {
color: #fff;
text-decoration: none;
}
#nav li:hover {
background: #06f;
}
#nav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 500px;
background: #06f;
color: #fff;
}
#nav li:hover span {
display: block;
}
#nav li span a {
display: inline;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Раздел 1</a></li>
<li>
<a href="#">Раздел 2</a>
<span>
<a href="#">Подраздел 1</a> |
<a href="#">Подраздел 2</a> |
<a href="#">Подраздел 3</a>
</span>
</li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>
Да, этот эффект не работает в ИЕ6. Чтобы победить ослика, можно применить специальный скрипт, который необходимо добавить в пределах тэга <head></head>:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#nav li").hover(function() {
$(this).css({ 'background' : '#06f'});
$(this).find("span").show();
} , function() {
$(this).css({ 'background' : 'none'});
$(this).find("span").hide();
});
});
</script>
