#nav{
float:left;
width:100%;
list-style:none;
font-weight:normal;
margin-bottom:4px;
margin-left:20px;
}

#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
text-transform:uppercase;
}

#nav li.stop{
color:#FFFFFF;
padding:5px 3px;
border:1px solid #CCCCCC;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;

}


#nav li.stop2{
color:#FFFFFF;
padding:5px 3px;



}

#nav li a{
display:block;
padding:5px;
color:#fff;
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: #000066;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */

}
#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;
text-transform:uppercase;

}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
padding: 5px 20px;
}

#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:-40px; /* Приносим его обратно на экран, когда нужно */
top:28px;
opacity:1; /* Делаем непрозрачным */
}

#nav li:hover{ 
background: #000066;

}


#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background: #000066;
background:rgba(10,10,150,0.8); /* Выглядит полупрозрачным */
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: #000066;
background:rgba(51,51,51,0.8); /* Будет полупрозрачным */
text-decoration:underline;
-moz-transform:scale(1.01);
-webkit-transform:scale(1.01);
}