.path_icon
            {
              background: url('../images/activ_arrow.png')  right no-repeat; background-position: 180px 5px;
            }
/*Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню.*/

#vertnav{list-style: none; }

#vertnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow:visible;
	width: 200px;
	z-index:1;
	}

/*Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.*/


#vertnav ul li {
	position: relative;
	}

/*Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор*/

#vertnav li ul {
    text-decoration: none;
	position: absolute;
	left: 199px;
	top: 0;
	display: none;
	background-color:#d4e7f1;
	z-index:2;
	}

/**:first-child+html #vertnav li ul {
	position: absolute;
	left: 199px;
	top: 3px;
	display: none;
	background:#103a46;
	z-index:2;
	}*/
/*Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)

Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.*/

/*Шрифт для основного меню*/
#vertnav ul li a {
	display: block;
	text-decoration: none;
	color: #0000FF;
	padding: 7px;
	padding-left:2px;
	border-top: 1px dotted #B3E7FF;
	font-family: Arial,Verdana,Tahoma;
    font-size: 13px;
    font-weight:bold;
    z-index:3;
    /*background:url('/../images/activ_arrow.gif') left  no-repeat;*/

    background-position: -10px 5px;
	}
/*Шрифт для подменю*/
#vertnav  li ul li a {
	display: block;
	text-decoration: none;
	color: #0000FF;
	padding: 7px;
	padding-left:2px;
	border-top: 1px solid #DAEFF3;
	border-bottom: 1px solid #C4E6EC;
	font-family: Tahoma,Verdana;
    font-size: 11px;
    font-weight:normal;
    z-index:3;
	}
/*Шрифт для основного меню в IE7*/
*:first-child+html #vertnav ul li a {
	display: block;
	text-decoration: none;
	color: #0000FF;
	padding: 5px;
	psdding-left:2px;
	border-top: 1px dotted #B3E7FF;
	font-family: Arial,Verdana,Tahoma;
    font-size: 13px;
    font-weight:bold;
    z-index:3;
    background:url('/../images/activ_arrow.gif') left  no-repeat;
    background-position: -10px 5px;
	}
/*Шрифт для подменю в IE7*/
*:first-child+html #vertnav  li ul li a {
	display: block;
	text-decoration: none;
	color: #0000FF;
	padding: 5px;
	border-top: 1px solid #DAEFF3;
	border-bottom: 1px solid #C4E6EC;
	font-family: Tahoma,Verdana;
    font-size: 11px;
    font-weight:normal;
    z-index:3;
	}
#vertnav li:hover, #vertnav  a:hover{
   /*background:url('/../images/menu_activ.png') left  no-repeat;*/
   background-color:#DFF8FF;
   text-decoration: none;
}
*html #vertnav li:hover, #vertnav  a:hover{
   /*background:url('/../images/menu_activ.png') left  no-repeat;*/
   background-color:#DFF8FF;
   text-decoration: underline;
}
/**:first-child+html  #vertnav a:hover{
   /* background-color:#F5DFB8;*
   text-decoration: none;
}*/



#vertnav ul li:hover ul, #vertnav ul li:hover ul ul, #vertnav ul li:hover ul ul ul, #vertnav ul li:hover ul ul ul ul{
    display:none;
   /* background-color:#F7F7F7;*/
  /* background-color:#FF0000;*/
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul{
    display:block;
    /*background-color:#F7F7F7;*/
}

li>ul {
	top: auto;
	left: auto;
}


/*Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.

Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.*/


* Fix IE. Hide from IE Mac \
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/*Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.

Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:*/


#vertnav ul {
	margin: 0;
	padding: 0px;
	list-style: none;
	width: 200px;
	border-bottom: 1px dotted #B3E7FF;
	z-index:4;
	}

/*А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.*/

#vertnav li:hover ul {
     display: block;
     font-family: Arial,Verdana,Tahoma;
     font-size: 12px;
     font-weight:bold;
     }

/*Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.
Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»"
Итак, правила для hover таковы:*/

#vertnav li:hover ul, li.over ul {
	 display: block;
	 font-family: Arial,Verdana,Tahoma;
     font-size: 12px;
     font-weight:bold;
      }

/*Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:*/


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

.path_icon2
            {
              background: url('../images/activ_arrow2.gif')  right no-repeat; background-position: 1px 5px;
            }

#vertnav2{list-style: none; }

#vertnav2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow:visible;
	width: 200px;
	z-index:1;
	}

/*Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.*/


#vertnav2 ul li {
	position: relative;
	}

/*Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор*/

#vertnav2 li ul {
    text-decoration: none;
	position: absolute;
	right: 199px;
	top: 0;
	display: none;
	background:#103a46;
	z-index:2;
	}
/**:first-child+html #vertnav li ul {
	position: absolute;
	left: 199px;
	top: 3px;
	display: none;
	background:#103a46;
	z-index:2;
	}*/
/*Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)

Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.*/


#vertnav2 ul li a {
	display: block;
	text-decoration: none;
	color: #D5F1FF;
	background:;
	padding: 3px;
	border-top: 1px solid #3A7474;
	/*border-bottom: 1px solid #3A7474;*/
	font-family: Arial,Verdana,Tahoma;
    font-size: 13px;
    font-weight:bold;
    z-index:3;
	}
*:first-child+html #vertnav2 ul li a {
	/*display: block;
	text-decoration: none;
	color: #D5F1FF;
	background:;*/
	/*margin: -2px;
	margin-left: 3px;*/
	/*border-top: 1px solid #3A7474;*/
	/*border-bottom: 1px solid #3A7474;*/
	/*font-family: Arial,Verdana,Tahoma;
    font-size: 13px;
    font-weight:bold;
    z-index:3;*/
	}

#vertnav2 li:hover, #vertnav2  a:hover{
   background-color:#095767;
   text-decoration: none;
}
/**:first-child+html  #vertnav a:hover{
   /* background-color:#F5DFB8;*
   text-decoration: none;
}*/



#vertnav2 ul li:hover ul, #vertnav2 ul li:hover ul ul, #vertnav2 ul li:hover ul ul ul, #vertnav2 ul li:hover ul ul ul ul{
    display:none;
   /* background-color:#F7F7F7;*/
}

#vertnav2 li:hover ul, #vertnav2 ul li:hover ul, #vertnav2 ul ul li:hover ul, #vertnav2 ul ul ul li:hover ul{
    display:block;
    /*background-color:#F7F7F7;*/
}

li>ul {
	top: auto;
	left: auto;
}


/*Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.

Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.*/


* Fix IE. Hide from IE Mac \
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/*Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.

Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:*/


#vertnav2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border-bottom: 1px solid #3A7474;
	z-index:4;
	}

/*А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.*/

#vertnav2 li:hover ul {
     display: block;
     font-family: Arial,Verdana,Tahoma;
     font-size: 12px;
     font-weight:bold;
     }

/*Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.
Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»"
Итак, правила для hover таковы:*/

#vertnav2 li:hover ul, li.over ul {
	 display: block;
	 font-family: Arial,Verdana,Tahoma;
     font-size: 12px;
     font-weight:bold;
      }

/*Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:*/


 Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */