/*
 *		Подключение whatever:hover
 *
 * 	Чтобы не было проблем с валидацией CSS, лучше подключать библиотеку
 * через HTML следующим кодом:
 *	<!--[if lte IE 6]>
 *		<style type="text/css">
 *			body { behavior:url("csshover3.htc"); }
 *		</style>
 *	<![endif]-->
 * А следующее правило, соответственно, следует удалить
 */

body {
	behavior:url("csshover3.htc");
}

/*
 *		Очистка значений по-умолчанию
 */

ul.menu,
ul.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}


/*
 *		Рабочий скелет меню
 *
 *		Задача: Простое появление и исчезание пунктов меню при наведении и исчезновении курсора.
 * 			Стиль не более необходимого для отображения трёхуровневого меню.
 *		Источник: http://www.xs4all.nl/~peterned/csshover.html
 */

ul.menu ul,
li:hover ul ul { display:none; }
li:hover ul,
li:hover li:hover ul { display:block; }

/*
 *		Приведение меню к стандартному виду строки с выпадающими пунктами
 *		Задача: Создать минимально оформленное горизонтальное меню с корректно-функционирующими подпунктами
 */

ul.menu li {
	float: left;
	position: relative;
}

ul.menu li,
ul.menu ul,
ul.menu li li a {
	width: 180pt;
}

ul.menu ul {
	position: absolute;
	left: 0;
}

ul.menu ul {
	clear: left;
}

ul.menu li li {
	float: none;
	position: relative;
}

ul.menu li li a {
	display: block;
}

ul.menu li li ul {
	left: 180pt;
}

/*
 *		Визуальное оформление меню
 */

ul.menu {
	font-family: arial, sans-serif;
	font-size: 11px;
}

ul.menu li a span {
	padding-left: 23px;
}
ul.menu ul {
	top: 2em;
	z-index: 200;
}
ul.menu a {
	text-decoration: none;
	line-height: 2;
}

ul.menu li {
	background-image: url(../music.png);
	background-repeat: no-repeat;
	background-position: 1.1% center;
}

ul.menu li.parent {
	background-image: url(../folder-closed.png);
}
ul.menu li.parent:hover {
	background-image: url(../folder.png);
}

ul.menu li:hover {
	background-color: #eee;
}

ul.menu ul {
	border: solid 1px #ddd;
	background-color: white;
}

ul.menu li li ul {
	top: -1px;
}