<script type="text/javascript" src="fixie.js"></script>

<style type="text/css">

/*стили для главного списка, и всех списков внутри него*/
#nav,#nav ul{
border:1px solid #000;/*задаем рамку*/
border-bottom:0px;/*убираем рамку снизу, т.к. она будет задана у ссылок*/
list-style:none; /*убираем маркеры списка*/
margin:0;/*убираем поля и отступы,т.к. они по разному трактуются различными браузерами*/
padding:0;
width:210px;/*задаем шиирну списка(меню)*/
font:12px Verdana, Arial, Helvetica, sans-serif; /*размер и семейство шрифта*/
}
/*стиль для элементов списка*/
#nav li{
position:relative; /*задаем относительное позиционирование. Теперь, вложенные элементы будут позиционироваться не относительно окна браузера, а относительно элементов списка.*/
background-color:#ffffff; /*цвет фона*/
}
#nav li:hover, #nav li.jshover{background-color:#c0c0c0;}/*меняем цвет фона пунктов списка при наведении на них*/
/*стиль для ссылок списков*/
#nav a{
border-bottom:1px solid #000; /*задаем рамку только снизу*/
color:white;/*цвет текста ссылок*/
display:block;/*делаем ссылки блоками(по умолчанию это строчный элемент)*/
padding:5px 10px; /*задаем поля внутри блока ссылки. Сверху/снизу - 5px , справа/слева - 10px */
text-decoration:none;/*убираем подчеркивание*/
position:relative;/*специальный прием для I.E. 7, чтобы ссылка была кликабельна по всей площади*/
}
/*специальные хаки, чтобы i.e.6 нормально отображал меню*/
* html #nav li{float:left}/*убирает возникающий отступ при выпадении подменю*/
* html #nav li a{height:1%}/*убирает разрыв между строками*/
/*стиль для ссылок при наведении*/
#nav a:hover{
background-color:#c0c0c0; /*цвет фона ссылок*/
color:#c0c0c0;/*цвет текста ссылок*/
}
/*стиль для вложенного списка*/
#nav li ul{
position:absolute; /*абсолютное позиционирование. в данном случае, будет позиционироваться от родительского элемента, для которого мы задали postion:relative*/
top:-1px;/*кордината отступа сверху. Ставим -1px, т.к. нам нужно поднять на 1 пиксель вверх, чтобы ликвидировать сдвиг, который получился из-за нижней рамки ссылки в один пиксель  */
left:210px;/*координата отступа слева*/
display:none;/*скрываем список по умолчанию*/
}
/*стиль для вложенного списка при наведении на пункт меню первого уровня*/
#nav li:hover ul,#nav li.jshover ul{
display:block; /*показываем список*/
}
/*стиль для списка 3 уровня вложенности при наведении на элемент списка первого уровня*/
#nav li:hover li ul,#nav li.jshover li ul{
display:none;/*прячем список*/
}
/* стиль для вложенного списка(3 уровень вложенности) при наведении на элемент списка 1 и 2 уровня*/
#nav li:hover li:hover ul,#nav li.jshover li.jshover ul{
display:block;/*показываем список при наведении*/
}



