/* создаем отступы */
.nav1{
margin:-1;
padding:0;
}


#nav {
margin:0 auto; /* выравниваем по центру */
border:2px solid #сссссс; /* рамка меню - линия толщиной в 2px серого цвета */
border-radius:2px; /* радиус скругления уголков рамки */
-moz-border-radius:2px; /* для Firefox */
-webkit-border-radius:2px; /* для Chrome */
box-shadow:1px 1px 4px #999999; /* тень рамки */
}
#nav, #nav ul {
list-style:none; /* убираем маркер списка */
padding:1; /* обнуляем внутренние отступы */
width:218px; /* задаем ширину */
}
#nav ul {
position:relative; /* относительное позиционирование (для работы z-index) */
z-index:-3; /* используем отрицательное значение чтобы подменю не отображались поверх основных пунктов*/
}
#nav li {
position:relative; /* относительное позиционирование (для работы z-index) */
z-index:100; /* располагаем выше элементы списка (подменю) */
}

/* раскрытые пункты подменю плавно сворачиваются */
#nav ul li {
margin-top:-23px; /* устанавливаем отрицательный отступ от верхнего края для скрытия подменю */
-moz-transition: 0.4s linear 0.4s; /* для Firefox 4 */
-ms-transition: 0.4s linear 0.4s; /* для IE */
-o-transition: 0.4s linear 0.4s; /* для Опера */
-webkit-transition: 0.4s linear 0.4s; /* для Chrome и Safari */
transition: 0.4s linear 0.4s; /* указываем параметры анимированного перехода */
}
#nav li a {
background-color:#abcdef; /* цвет фона для нашего меню */
color:#333; /* цвет шрифта */
display:block; /* отображаем как блок */
font-size:12px; /* размер шрифта */
font-weight:bold; /* делаем шрифт жирным */
line-height:26px; /* межстрочный интервал */
outline:0; /* убираем внешней границы */
padding-left:15px; /* назначаем левый отступ */
text-decoration:none; /* убираем подчеркивание у ссылок меню */
}

/* стрелочка вниз */
#nav li a.sub {
background:#abcdef no-repeat;
}

#nav li a.sub:hover {
background-color:#96c4f1; /* цвет фона */
}

/* оформление пунктов меню (стрелочка вверх при раскрытии) */
#nav li a + img {
cursor:pointer; /* вид курсора */
display:none; /* скрывает отображение (устраняет накладку) */
width:218px; /* ширина */
height:26px; /* высота */
left:0; /* положение от левого края */
position:absolute; /* позиционируем */
top:0; /* положение от верха */
}

/* оформление пунктов меню (картинка большого квадратика) */
#nav li a img {
border-width:0px; /* убираем толщину границ */
width:24px; /* ширина */
height:26px; /* высота */
line-height:26px; /* межстрочный интервал */
margin-right:8px; /* отступа от правого края */
vertical-align:middle; /* выравнивание */
}

/* параметры основных пунктов меню */
#nav li a:hover {
background-color:#ссс; /* цвет фона */
}

/* параметры для подменю */
#nav ul li a {
background-color:#eee; /* цвет фона */
border-bottom:1px solid #eee; /* линия толщиной в 1px серого цвета внизу подменю */
color:#000; /* шрифт (белый) */
font-size:11px; /* размер шрифта */
line-height:22px; /* задаем межстрочный интервал */
}

/* параметры при наведении указателя на пункты (ссылки) подменю */
#nav ul li a:hover {
background-color:#eeeeee; /* цвет фона */
color: #ff8800; /* цвет ссылок при наведении курсора */
}
#nav ul li a img {
background: url("") no-repeat; /* рисунок "маленький квадратик" для подпунктов меню */
width:16px; /* ширина рисунка */
height:16px; /* высота рисунка */
border-width:0px; /* обнуляем толщину границы для всех сторон */
line-height:22px; /* задаем межстрочный интервал */
margin-right:5px; /* отступа от правого края */
vertical-align:middle; /* выравниваем по вертикали */
}

/* при клике мышкой на раскрывающееся меню */
#nav a.sub:focus {
background:#7fc7ff; /* фон, который закрывает стрелочку "вниз" */
outline:0; /* убираем внешней границы */
}

/* делаем раскрытие пунктов меню более плавным */
/* посмотрите как будет раскрываться список подменю, изменив время к примеру с 0.4s до 33.4s */
#nav a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear; /* для Firefox 4 */
-ms-transition: 0.4s linear; /* для IE */
-o-transition: 0.4s linears; /* для Опера */
-webkit-transition: 0.4s linears; /* для Chrome и Safari */
transition: 0.4s linear; /* указываем параметры анимированного перехода */
}

/* для показа стрелочки "вверх" после клика */
#nav a:focus + img, #nav a:active + img {
display:block; /* показываем как блочные элементы */
}