


/*стили для главного списка, и всех списков внутри него*/
#dropdown-demo, #dropdown-demo ul{
border:0;/*убираем рамку снизу, т.к. она будет задана у ссылок*/
list-style:none; /*убираем маркеры списка*/
margin:0;/*убираем поля и отступы,т.к. они по разному трактуются различными браузерами*/
padding:0;
width:220px;/*задаем шиирну списка(меню)*/

}
/*стиль для элементов списка*/
#dropdown-demo li{
position:relative; /*задаем относительное позиционирование. Теперь, вложенные элементы будут позиционироваться не относительно окна браузера, а относительно элементов списка.*/
}

#dropdown-demo ul, #dropdown-demo li ul
{
 border:1px solid #000;
 border-bottom:none;
}
 

#dropdown-demo a{
	  /*задаем рамку только снизу*/
display:block;/*делаем ссылки блоками(по умолчанию это строчный элемент)*/
padding:5px 10px; /*задаем поля внутри блока ссылки. Сверху/снизу - 5px , справа/слева - 10px */
text-decoration:none;/*убираем подчеркивание*/
position:relative;/*специальный прием для I.E. 7, чтобы ссылка была кликабельна по всей площади*/
}
/*специальные хаки, чтобы i.e.6 нормально отображал меню*/
* html #dropdown-demo li{float:left}/*убирает возникающий отступ при выпадении подменю*/
* html #dropdown-demo li a{height:1%}/*убирает разрыв между строками*/
/*стиль для ссылок при наведении*/
#dropdown-demo a:hover{
color:#000000;/*цвет текста ссылок*/
text-decoration:underline;
}
/*стиль для вложенного списка*/
#dropdown-demo li ul{
position:absolute; /*абсолютное позиционирование. в данном случае, будет позиционироваться от родительского элемента, для которого мы задали postion:relative*/
top:-1px;/*кордината отступа сверху. Ставим -1px, т.к. нам нужно поднять на 1 пиксель вверх, чтобы ликвидировать сдвиг, который получился из-за нижней рамки ссылки в один пиксель  */
left:220px;/*координата отступа слева*/
background:#fff;
display:none;/*скрываем список по умолчанию*/
}

#dropdown-demo li ul li{
border-bottom:1px solid #000;}

/*стиль для вложенного списка при наведении на пункт меню первого уровня*/
#dropdown-demo li:hover ul, #dropdown-demo li.jshover ul{
display:block; /*показываем список*/
}
/*стиль для списка 3 уровня вложенности при наведении на элемент списка первого уровня*/
#dropdown-demo li:hover li ul, #dropdown-demo li.jshover li ul{
display:none;/*прячем список*/
}
/* стиль для вложенного списка(3 уровень вложенности) при наведении на элемент списка 1 и 2 уровня*/
#dropdown-demo li:hover li:hover ul, #dropdown-demo li.jshover li.jshover ul{
display:block;/*показываем список при наведении*/
}

/* these are the LIs that contains a submenu*/
#dropdown-demo li.submenu-down{
	background:#000 url('expand_down.gif') center left no-repeat;
	padding-left:20px;
	width:105px;
}

/* these are the LIs that contains a submenu and which are in a sub-menu themselve*/
#dropdown-demo li.submenu-left{
	background:#000 url('expand_right.gif') center right no-repeat;
	padding-right:20px;
	width:105px;
}


