<ul id="nav">  
   <li>  
   <a href="#" title="Вернуться на главную страницу">Главная</a>  
   </li>  
   <li>  
   <a href="#" title="Информация о компании">О нас</a>  
   <ul>  
   <li><a href="#">Продукты</a></li>  
   <li><a href="#">Команда</a></li>  
   </ul>  
   </li>  
   <li>  
   <a href="#" title="Что мы можем для вас сделать">Услуги</a>  
   <ul>  
   <li><a href="#">Услуга один</a></li>  
   <li><a href="#">Услуга два</a></li>  
   <li><a href="#">Услуга три</a></li>  
   <li><a href="#">Услуга четыре</a></li>  
   </ul>  
   </li>  
   <li>  
   <a href="#" title="Наша продуктовая линейка">Продукты</a>  
   <ul>  
   <li><a href="#">Маленький продукт (первый)</a></li>  
   <li><a href="#">Маленький продукт (второй)</a></li>  
   <li><a href="#">Маленький продукт (третий)</a></li>  
   <li><a href="#">Маленький продукт (четвертый)</a></li>  
   <li><a href="#">Большой продукт (пятый)</a></li>  
   <li><a href="#">Большой продукт (шестой)</a></li>  
   <li><a href="#">Большой продукт (седьмой)</a></li>  
   <li><a href="#">Большой продукт (восьмой)</a></li>  
   <li><a href="#">Невообразимый продукт (девятый)</a></li>  
   <li><a href="#">Невообразимый продукт (десятый)</a></li>  
   <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>  
   </ul>  
   </li>  
   <li>  
   <a href="#" title="Как с нами связаться">Контакт</a>  
   <ul>  
   <li><a href="#">Часы работы</a></li>  
   <li><a href="#">Местоположение</a></li>  
   </ul>  
   </li>  
</ul>

/*------------------------------------*\  
   НАВИГАЦИЯ  
\*------------------------------------*/  
#nav{  
   float:left;  
   width:100%;  
   list-style:none;  
   font-weight:bold;  
   margin-bottom:10px;  
}  
#nav li{  
   float:left;  
   margin-right:10px;  
   position:relative;  
   display:block;  
}  
#nav li a{  
   display:block;  
   padding:5px;  
   color:#fff;  
   background:#333;  
   text-decoration:none;  
     
   text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */  
   -moz-border-radius:2px;  
   -webkit-border-radius:2px;  
   border-radius:2px;  
}  
#nav li a:hover{  
   color:#fff;  
   background:#6b0c36;  
   background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */  
   text-decoration:underline;  
}  

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/  
#nav ul{  
   list-style:none;  
   position:absolute;  
   left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */  
   opacity:0; /* Устанавливаем начальное состояние прозрачности */  
   -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */  
}  
#nav ul li{  
   padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */  
   float:none;  
   background:url(dot.gif);  
}  
#nav ul a{  
   white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */  
   display:block;  
}  
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */  
   left:0; /* Приносим его обратно на экран, когда нужно */  
   opacity:1; /* Делаем непрозрачным */  
}  
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */  
   background:#6b0c36;  
   background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */  
   text-decoration:underline;  
}  
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */  
   text-decoration:none;  
   -webkit-transition:-webkit-transform 0.075s linear;  
}  
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */  
   background:#333;  
   background:rgba(51,51,51,0.75); /* Будет полупрозрачным */  
   text-decoration:underline;  
   -moz-transform:scale(1.05);  
   -webkit-transform:scale(1.05);  
}  

#nav ul{  
   list-style:none;  
   position:absolute;  
   left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */  
   opacity:0; /* Устанавливаем начальное состояние прозрачности */  
   -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */  
}  

#nav ul li{  
   padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */  
   float:none;  
   background:url(dot.gif);  
}  
#nav ul a{  
   white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */  
   display:block;  
}  
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */  
   left:0; /* Приносим его обратно на экран, когда нужно */  
   opacity:1; /* Делаем непрозрачным */  
}  

#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */  
   background:#6b0c36;  
   background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */  
   text-decoration:underline;  
}  

#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */  
   text-decoration:none;  
   -webkit-transition:-webkit-transform 0.075s linear;  
}  

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */  
   background:#333;  
   background:rgba(51,51,51,0.75); /* Будет полупрозрачным */  
   text-decoration:underline;  
   -moz-transform:scale(1.05);  
   -webkit-transform:scale(1.05);  
}