Выпадающее меню на CSS

Сегодня мы посмотрим как сделать вот такое выпадающее меню только средствами HTML и CSS.

Для этого возьмем

Рассматриваемый нами фреймворк позволит вам сделать не только горизонтальное, но еще и вертикальное, и линейное меню. Файлы стилей разбиты таким образом, что вам останется только добавить свой стиль и меню готово.

Сначала я подробно расскажу как сделать горизонтальное выпадающее меню CSS. Далее приведу ссылки на вертикальное и линейное меню — они делают по такой же схеме, разница только в CSS файле.

Для начала рассмотрим как должна выглядеть HTML разметка нашего меню. Здесь все очень просто — все меню это вложенные списки.

<ul class="dropdown">
	<li ><a href="/html-css/css-drop-down-menu/">Вернуться к статье</a></li>
	<li><a href="./" class="dir">Посмотреть разделы сайта</a>
		<ul>
			<li><a class="dir" href="/html-css/">HTML и CSS</a>
				<ul>
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
				</ul>
			</li>
			<li><a href="/js/">JavaScript</a></li>
			<li><a href="/photoshop/">Photoshop</a></li>
			<li><a href="/design/">Дизайн</a></li>
			<li><a href="/misc/">Разное</a></li>
		</ul>
	</li>
</ul>

dir

ставится на тех элементах, которые содержат вложенности.

У нас будет 2 файла со стилями. Один отвечает за расположение элементов меню, второй — за внешнее оформление (что-то вроде скина).

@charset "UTF-8";
/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.dropdown {
	position: relative;
	z-index: 597;
	float: left;
}
ul.dropdown li {
	float: left;
	line-height: 1.3em;
	vertical-align: middle;
	zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}
ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: 100%;
}
ul.dropdown ul li {
	float: none;
}
ul.dropdown ul ul {
	top: 1px;
	left: 99%;
}
ul.dropdown li:hover > ul {
	visibility: visible;
}

:hover

$(document).ready(function() {
	$("ul.dropdown li").hover(function() {
		$(this).addClass("hover");
		$('> .dir',this).addClass("open");
		$('ul:first',this).css('visibility', 'visible');
	}, function() {
		$(this).removeClass("hover");
		$('.open',this).removeClass("open");
		$('ul:first',this).css('visibility', 'hidden');
	});
});

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->