Создаем меню навигации с выпадающими подпунктами на CSS3

<div class="menu-nav">
   <ul>
      <li class="first"><a href="#">Главная</a></li>
      <li><a href="#">Уроки</a>
   <ul>
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">Photoshop</a></li>
      <li><a href="#">Dreamweaver</a></li>
      <li><a href="#">Flash</a></li>
   </ul>
        </li>
       <li><a href="#">Видео</a>
   <ul>
       <li><a href="#">Youtube</a></li>
       <li><a href="#">Vimeo</a></li>
       <li><a href="#">Rutube</a></li>
   </ul>
        </li>
       <li><a href="#">Программы</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="#">Онлайн</a>
   <ul>
       <li><a href="#">Сервисы</a></li>
   </ul>
   </li>                                   
        <li><a href="#">WordPress</a>
    <ul>
        <li><a href="#">Плагины</a></li>
        <li><a href="#">Темы WP</a></li>                                 
    </ul>
    </li>
        <li><a href="#">О Сайте</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

<ul>
    <li>Ссылка1</li>
    <li>Ссылка2</li>
    <li>Ссылка3</li>
    <li>Ссылка4</li>
</ul>

<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4
    <ul>
        <li>Подпункт 1</li>
        <li>Подпункт 2</li>
        <li>Подпункт 3</li>
        <li>Подпункт 4</li>
    </ul>
   </li>
</ul>

<link rel="stylesheet" type="text/css" href="style.css"/>

/*База*/
* {margin: 0; padding: 0;}
 
body{
    font-family:Helvetica,Arial, sans-serif;
    font-size:14px;
    background: #474747 url(bg.png);
}
#container {
    width:960px; /*Ширина контейнера*/
    margin: 10px auto;
}
/*Меню*/
.menu-nav {
    position:relative;
    width: 100%; /*Ширина панели меню*/
    height:50px;
    font-size:14px;
    color:#999;
    margin: 0 auto;
    margin-top: 20px;
 /*Цвет и градиент фона панели меню*/
    background: #395593;
    background: -moz-linear-gradient(top, #647db5, #395593);
    background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593));
    background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
    border: 1px solid #444;
/*Закругленные углы панели меню*/
    border-radius: 8px;
   -moz-border-radius: 8px;
   -khtml-border-radius: 8px;
   -webkit-border-radius: 8px;
}
 
.menu-nav ul {
    list-style:none;
    color: #FFF;
}
 
.menu-nav ul li {
     float:left;
     position:relative;
}
.menu-nav ul li a {
    border-right:1px solid #364f87;
    border-left:1px solid #7189c0;
    padding:17px;
    display:block;
    text-decoration:none;
    text-align:center;
    color:#FFF;
    background: #395593;
    background: -moz-linear-gradient(top, #647db5, #395593);
    background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593));
    background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147));
    text-shadow: 0 -1px 0 #111;
}
.menu-nav li.first a {
    border-radius: 8px 0 0 8px;
   -moz-border-radius: 8px 0 0 8px;
   -khtml-border-radius: 8px 0 0 8px;
   -webkit-border-radius: 8px 0 0 8px;
}
 /*Цвет и градиент фона при наведении*/
.menu-nav ul li a:hover {
    background: #647db5;
    background: -moz-linear-gradient(top, #395593, #647db5);
    background: -webkit-gradient(linear, left top, left bottom, from(#395593), to(#647db5));
    background-image: -o-linear-gradient(top,rgb(57, 85, 147), rgb(100, 125, 181));
    color:#fff;
}
.menu-nav ul li ul {
    display: none;
}
.menu-nav ul li:hover ul {
    display: block;
    position: absolute;
    min-width:200px;
    left:0;
    margin-top: -1px;
}  
.menu-nav ul li:hover ul li a {
    display:block;
    color:#ffffff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #283f74;
    border-top: 1px solid #366ea6;
    background: #364f87;
}
.menu-nav ul li ul li:first-child a {
    border-top:none;
}
.menu-nav ul li ul li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.menu-nav ul li:hover ul li a:hover {
    background:#395593;
    color:#ffffff;
}