/* обнуляем отступы */ *{ margin:0; padding:0; } body { background-color:#fff; /* задаем цвет фона (белый) */ color:#fff; /* задаем цвет текста (белый) */ font-size:14px; /* задаем размер шрифта на странице */ font-style:normal; /* начертание шрифта (нормальное) */ font-family:Arial, Helvetica, sans-serif; /* устанавливаем шрифт */ } .container { width:400px; /* ширина контейнера */ height:400px; /* высота контейнера */ position:relative; /* устанавливаем положение контейнера */ margin:0px auto; /* задаем отступы верх-низ и располагаем контейнер по центру */ padding:0px; /* задаем внутренние отступы */ } #nav { margin:0 auto; /* выравниваем по центру */ border:2px solid #666666; /* рамка меню - линия толщиной в 2px серого цвета */ border-radius:2px; /* радиус скругления уголков рамки */ -moz-border-radius:2px; /* для Firefox */ -webkit-border-radius:2px; /* для Chrome */ box-shadow:1px 1px 4px #666666; /* тень рамки */ } #nav, #nav ul { list-style:none; /* убираем маркер списка */ padding:0; /* обнуляем внутренние отступы */ width:192px; /* задаем ширину */ } #nav ul { position:relative; /* относительное позиционирование (для работы z-index) */ z-index:-1; /* используем отрицательное значение чтобы подменю не отображались поверх основных пунктов*/ } #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:#008080; /* цвет фона для нашего меню (teal) */ color:#fff; /* цвет шрифта (белый) */ display:block; /* отображаем как блок */ font-size:14px; /* размер шрифта */ font-weight:bold; /* делаем шрифт жирным */ line-height:38px; /* межстрочный интервал */ outline:0; /* убираем внешней границы */ padding-left:15px; /* назначаем левый отступ */ text-decoration:none; /* убираем подчеркивание у ссылок меню */ } /* стрелочка вниз */ #nav li a.sub { background:#008080 url("../images/down.gif") no-repeat; } /* оформление пунктов меню (стрелочка вверх при раскрытии) */ #nav li a + img { cursor:pointer; /* вид курсора */ display:none; /* скрывает отображение (устраняет накладку) */ width:200px; /* ширина */ height:28px; /* высота */ left:0; /* положение от левого края */ position:absolute; /* позиционируем */ top:0; /* положение от верха */ } /* оформление пунктов меню (картинка большого квадратика) */ #nav li a img { border-width:0px; /* убираем толщину границ */ width:24px; /* ширина */ height:22px; /* высота */ line-height:28px; /* межстрочный интервал */ margin-right:8px; /* отступа от правого края */ vertical-align:middle; /* выравнивание */ } /* параметры основных пунктов меню */ #nav li a:hover { background-color:#bcbdc1; /* цвет фона */ } /* параметры для подменю */ #nav ul li a { background-color:#eee; /* цвет фона */ border-bottom:1px solid #ccc; /* линия толщиной в 1px серого цвета внизу подменю */ color:#000; /* шрифт (белый) */ font-size:14px; /* размер шрифта */ line-height:22px; /* задаем межстрочный интервал */ } /* параметры при наведении указателя на пункты (ссылки) подменю */ #nav ul li a:hover { background-color:#ddd; /* цвет фона */ color: #993300; /* цвет ссылок при наведении курсора */ } #nav ul li a img { background: url("../images/small.png") no-repeat; /* рисунок "маленький квадратик" для подпунктов меню */ width:16px; /* ширина рисунка */ height:16px; /* высота рисунка */ border-width:0px; /* обнуляем толщину границы для всех сторон */ line-height:22px; /* задаем межстрочный интервал */ margin-right:5px; /* отступа от правого края */ vertical-align:middle; /* выравниваем по вертикали */ } /* при клике мышкой на раскрывающееся меню */ #nav a.sub:focus { background:#bcbdc1; /* фон, который закрывает стрелочку "вниз" */ 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; /* показываем как блочные элементы */ }