<script type="text/javascript" src="http://getelement.3dn.ru/materials/menu/menu.js"></script>
<script type="text/javascript">
$(document).ready(function() { menuSlider.init('menu','slide') });
</script>

.menu {
position:relative;
background: -webkit-linear-gradient(top, #333, #555)!important; /*-Здесь мы-*/
background: -moz-linear-gradient(top, #333, #555)!important; /*-используем-*/
background: -ms-linear-gradient(top, #333, #555)!important; /*-градиентную заливку для всего меню-*/
background: -o-linear-gradient(top, #333, #555)!important; /*-Можете поставить картинку или свои цвета-*/
height:35px; /*-Это высота нашего меню-*/
width:540px; /*-Важный параметр о нем ниже расскажу-*/
-webkit-border-radius: 6px; /*-Скругление углов-*/
-moz-border-radius: 6px;
border-radius: 6px;
}

.menu ul {
list-style:none;
z-index:10;
position:absolute;
z-index:100;
padding:9px 5px;
}
   
.menu li {
float:left;
}

.menu a, .menu a:active, .menu a:visited, .menu a:hover {
text-decoration:none;
color:#9ACD32; /*-Это цвет ссылок-*/
padding:10px;
}
/*-Здесь идут параметры слайда-*/
#slide {
border-top:2px solid #9ACD32;
position:absolute;
top:6px;
height:24px;
z-index:10;
background: -webkit-linear-gradient(top, #777, #444)!important;
background: -moz-linear-gradient(top, #777, #444)!important;
background: -ms-linear-gradient(top, #777, #444)!important;
background: -o-linear-gradient(top, #777, #444)!important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

<div class="menu">
  <ul id="menu">
  <li value="1"><a href="#">JavaScript</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">jQueryUI</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">GetElement</a></li>
  </ul>
  <div id="slide"></div>
</div>