Это простое, симпатичное горизонтальное меню располагается вверху web страницы с выплывающими пунктами при наведении. В нём используется CSS и JavaScript.

HTML разметка:

<ul id="navigation"> 
<li class="home"><a href="ССЫЛКА"><span>Главная</span></a></li> 
<li class="news"><a href="ССЫЛКА"><span>Новости</span></a></li> 
<li class="auth"><a href="ССЫЛКА"><span>Вход</span></a></li> 
<li class="reg"><a href="ССЫЛКА"><span>Регистрация</span></a></li> 
<li class="compet"><a href="ССЫЛКА"><span>Конкурсы</span></a></li> 
<li class="tos"><a href="ССЫЛКА"><span>Правила</span></a></li> 
<li class="supp"><a href="ССЫЛКА"><span>Поддержка</span></a></li> 
</ul>

CSS стили:

ul#navigation { 
  position: fixed; /* ФИКСИРОВАННОЕ позиционирование */ 
  margin: 0px; 
  padding: 0px; 
  top:102px; /* Положение от верхнего края */ 
  right: 300px; /* Положение от правого края */ 
  list-style: none; 
  z-index:1; /* Позиционированние элемента */ 
  width:721px; 
} 
ul#navigation li { 
  width: 103px; 
  display:inline; 
  float:left;  
} 
ul#navigation li a { 
  display: block; 
  float:left; 
  margin-top: -2px; 
  width: 100px; 
  height: 25px; 
  background-color:#E7F2F9; 
  background-repeat:no-repeat; 
  background-position:50% 10px; 
  border:1px solid #BDDCEF; 
  -moz-border-radius:0px 0px 10px 10px; 
  -webkit-border-bottom-right-radius: 10px; 
  -webkit-border-bottom-left-radius: 10px; 
  -khtml-border-bottom-right-radius: 10px; 
  -khtml-border-bottom-left-radius: 10px; 
  text-decoration:none; 
  text-align:center; 
  padding-top:80px; 
  opacity: 0.7; 
   
} 
ul#navigation li a:hover {background-color:#CAE3F2;} 

ul#navigation li a span { 
  letter-spacing:2px; 
  font-size:11px; 
  color:#60ACD8; 
  text-shadow: 0 -1px 1px #fff;  
} 
ul#navigation .home a {background-image: url(home.png);} 

ul#navigation .news a {background-image: url(news.png);} 

ul#navigation .auth a {background-image: url(auth.png);} 

ul#navigation .reg a {background-image: url(reg.png);} 

ul#navigation .compet a {background-image: url(compet.png);} 

ul#navigation .tos a {background-image: url(tos.png);} 

ul#navigation .supp a {background-image: url(supp.png);}

avaScript для выплывающих пунктов при наведении:

<script type="text/javascript"> 
$(function() { 
var d=300; 
$('#navigation a').each(function(){ 
$(this).stop().animate({ 
'marginTop':'-80px' 
},d+=150); 
}); 

$('#navigation > li').hover( 
function () { 
$('a',$(this)).stop().animate({ 
'marginTop':'-2px' 
},200); 
}, 
function () { 
$('a',$(this)).stop().animate({ 
'marginTop':'-80px' 
},200); 
} 
); 
}); 
</script>

Вот и всё. Надеюсь Вам понравилось. Удачи Вам.