.menu ul, .menu li, .menu-title {  
margin:0;  
padding:0;  
border:0;  
outline:0;  
font:inherit;  
vertical-align:baseline;  
  }  
  .menu {  
font-size:13px;  
font-family:arial  
  }  
  .menu a {  
text-decoration: none;  
color: #fff;  
font-weight: bold;  
float: left;  
display: block;  
padding: 10px 15px;  
  }  
  .menu a:hover {  
color: #ddd;  
  }  
  .drop-down a {  
float: none;  
min-width: 90px;  
  }  
  .drop-down-menu {  
float: left;  
display: block;  
  }  
  .menu-title {  
cursor: default;  
padding: 10px 15px;  
  }  
  .activate {  
display: none;  
position: absolute;  
cursor: pointer;  
width: 100%;  
height: 40px;  
margin: 0 0 0 -15px;  
opacity: 0;  
  }  
  @media only screen and (min-width: 800px) {  
.drop-down-menu:hover .drop-down {  
display: block;  
}  
.drop-down {  
position: absolute;  
}  
  }  
  @media only screen and (max-width: 799px) {  
.menu a, .drop-down-menu {  
float: none;  
}  
.activate {  
display: block;  
}  
  }  
  /* Skin */  
.menu a, .drop-down-menu {  
background: #3d6d99;  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5796d0), color-stop(100%, #3d6d99));  
background: -moz-linear-gradient(top, #5796d0 0%, #3d6d99 100%);  
  }  
  .menu a:hover, .drop-down-menu:hover {  
background: #5a6470;  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #495261), color-stop(100%, #38404b));  
background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);  
  }  
  .drop-down a {  
background: #222;  
  }  
  .drop-down a:hover {  
background: #111;  
  }  
  @media only screen and (min-width: 800px) {  
.first {  
border-top-left-radius: 8px;  
border-bottom-left-radius: 8px;  
}  
.last {  
border-top-right-radius: 8px;  
border-bottom-right-radius: 8px;  
}  
.drop-down .last {  
border-radius: 0;  
border-bottom-left-radius: 8px;  
border-bottom-right-radius: 8px;  
}  
  }  
  @media only screen and (max-width: 799px) {  
.menu {  
background: #3d6d99;  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5796d0), color-stop(100%, #3d6d99));  
background: -moz-linear-gradient(top, #5796d0 0%, #3d6d99 100%);  
}  
:checked ~ .menu-title {  
background: #495261;  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #495261), color-stop(100%, #38404b));  
background: -moz-linear-gradient(top, #495261 0%, #38404b 100%);  
}  
.menu a, .drop-down-menu {  
background: none;  
}  
.drop-down a {  
background: #222;  
}  
  }  
  /* IE */  
.ie8 .drop-down-menu:hover .drop-down {  
display: block;  
  }  
  .ie8 .drop-down {  
position: absolute;  
  }  
  .drop-down {  
max-height: 0;  
overflow: hidden;  
  }  
  .ie8 .drop-down-menu:hover .drop-down {  
max-height: 200px;  
  }  
  @media only screen and (min-width: 800px) {  
.drop-down-menu:hover .drop-down {  
max-height: 200px;  
}  
  }  
  @media only screen and (max-width: 799px) {  
.activate:checked ~ .drop-down {  
max-height: 200px;  
}  
  }  
  .drop-down, .menu a, .drop-down-menu {  
-webkit-transform: translateZ(0);  
-webkit-transition: all 0.3s;  
-moz-transition: all 0.3s;  
-o-transition: all 0.3s;  
transition: all 0.3s;  
  }

<nav class="menu">  
<a class="first" href="#">Главная</a>  
<a href="#">Форум</a>  
<nav class="drop-down-menu">  
<input type="radio" class="activate" name="accordion" />  
<h3 class="menu-title">Скрипты</h3>  
<div class="drop-down">  
<a href="#">Навигация</a>  
<a href="#">Слайдеры</a>  
<a class="last" href="#">Галереи</a>  
</div>  
</nav>  
<nav class="drop-down-menu">  
<input type="radio" class="activate" name="accordion" />  
<h3 class="menu-title">Программы</h3>  
<div class="drop-down">  
<a href="#">Системные</a>  
<a href="#">Офис</a>  
<a class="last" href="#">Разработчику</a>  
</div>  
</nav>  
<a href="#">Контакты</a>  
<a class="last" href="#">О нас</a>  
  </nav>