Меню 1

<style type="text/css">
body {
background: #474747 url(bg.png);
    color: #000000;
    font: 14px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container {
    max-width: 960px;
    margin: 0 auto;
}
h1 a {
display: block; text-decoration: #00BFFF;
font: 68px Helvetica, Arial, Sans-Serif; letter-spacing: -4px;
text-align: center;
color: #000000;
    text-shadow: 0px 3px 8px #2a2a2a;
 }
h1 a:hover {
    color: #000000;
    text-shadow: 0px 5px 8px #2a2a2a;
}

h2 {
font: 32px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #000000;
    text-shadow: 0px 2px 3px #555;
}

h3 {
    margin: 45px auto;
font: 18px Helvetica, Arial, Sans-Serif;
    letter-spacing: 1px;
text-align: center;
color: #000000;
    text-shadow: 1px 1px 2px #2a2a2a;
 }
h3:hover {
    color: #BDB2B2;
    text-shadow: 1px 1px 3px #0D0C0C;
}
a {
text-decoration: #00BFFF;
color: #257c1e;
    text-shadow: 0px 3px 8px #2a2a2a;
 }
a:hover {
    color: #12a30d;
    text-shadow: 0px 5px 8px #2a2a2a;
}
</style>
<style type="text/css">
ul#topnav {
margin: 0;
    padding: 0;
float: left;
max-width: 960px;
    width: 100%;
list-style: none;
position: relative;
font: normal 14px Helvetica, Arial, sans-serif;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color:#919179;
text-decoration: none;
}
ul#topnav li:hover {
    background: #1376c9 url(topnav_active.gif) repeat-x;
}
ul#topnav li a:hover{
    color:#b2b288;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
    top:34px;
display: none;/* По умолчанию скрыто */
max-width: 960px;
    width: 100%;
background: #1376c9;
color: #a09f9f;
/*--Внизу справа скругление угла--*/
    border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Внизу слева скругление угла--*/
    border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
    display: block;
}
ul#topnav li span a {
    color:#b1b178;
    display: inline;
}
ul#topnav li span a:hover {
    color:#FFFFFF;
    text-decoration: none;
}
</style>


<div class="container">
<div style="clear: both; padding-bottom: 35px; text-align: center;">
<ul id="topnav">
<li><a href="#">Главная</a></li> <li>
<a href="#">Про блог</a>
<span>
<a href="#">1</a> |
<a href="#">2</a> |
<a href="#">3</a> |
<a href="#">4</a> |
<a href="#">5</a> |
<a href="#">6</a> |
<a href="#">7</a>
</span> </li> <li>
<a href="#">Клас</a>
<span>
<a href="#">ІІ</a> |
<a href="#">ІІІ</a> |
<a href="#">ІV</a> |
<a href="#">V</a> |
<a href="#">VI</a>
</span> </li> <li>
<a href="#">Портфолио</a>
<span>
<a href="#">1А</a> |
<a href="#">2А</a> |
<a href="#">3А</a> |
<a href="#">4А</a> |
<a href="#">5А</a> |
<a href="#">6А</a>
</span> </li>
<li><a href="">Контакт</a></li>
<li><a href="">2 клас</a></li>
<li><a href="">3 клас</a></li>
<li><a href="">4 клас</a></li>
<li><a href="">5 клас</a></li>
<li><a href="">6 клас</a></li>
    </ul>
<br />
<br />
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
        $("ul#topnav li").hover(function() { //При наведении на элемент списка меню
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Добавить цвет фона + изображение на элемент списка
$(this).find("span").show(); //Показать подменю} , function() { //при уходе с элемента списка...
$(this).css({ 'background' : 'none'}); //Убрать изменения фона
$(this).find("span").hide(); //Скрыть подменю});
 });
</script></div></div>