Я в принципе так и начал делать, вот только ховер делает резкие изменения, а суть должна быть в том что бы плавное поднимание. Вот исходный код. Я его делал на основе готового скрипта. <!DOCTYPE html><html><head><meta charset="windows-1251" /><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title></title><meta name="keywords" content="" /><meta name="description" content="" /><link href="css/style.css" rel="stylesheet"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $('#menu > li').hover( function () { var $this = $(this); $('a',$this).stop(true,true).animate({ 'bottom':'132px' }, 300); $('i',$this).stop(true,true).animate({ 'top':'0px' }, 400); }, function () { var $this = $(this); $('a',$this).stop(true,true).animate({ 'bottom':'-95px' }, 300); $('i',$this).stop(true,true).animate({ 'top':'50px' }, 400); } ); }); </script></head> <body> <div class="wrapper"> <!-- <div id="content">--> <div id="menu"> <div class="container"><ul id="menu"><li> <a class="about"> <i class="icon_about"></i> <span class="title"></span> <span class="description_about"> <div id="title"><p>О ТИГУ</p></div></span> </a> </li> <li> <a class="work"> <i class="icon_work"></i> <span class="title"></span> <span class="description_work"> <div id="title1"><p>ФАКУЛЬТЕТЫ</p></div> </span> </a> </li> <li> <a class="work"> <i class="icon_help"></i> <span class="title"></span> <span class="description_help"> <div id="title1"><p>НАУКА И ИНОВАЦИИ</p></div> </span> </a> </li></ul></div> <div class="container_o"> <ul id="menu"> <li> <a class="work"> <i class="icon_post"></i> <span class="title"></span> <span class="description_post"> <div id="title1"><p>ПОСТУПЛЕНИЕ</p></div> </span> </a> </li> <li> <a class="work"> <i class="icon_mag"></i> <span class="title"></span> <span class="description_mag"> <div id="title1"><p>МАГИСТРАТУРА</p></div> </span> </a> </li> <li> <a class="work"> <i class="icon_sotr"></i> <span class="title"></span> <span class="description_sotr"> <div id="title1"><p>СОТРУДНИЧЕСТВО</p></div> </span> </a> </li> <li> <a class="work"> <i class="icon_st"></i> <span class="title"></span> <span class="description_st"> <div id="title1"><p>СТУДЕНТАМ</p></div> </span> </a> </li></ul></div></div> </div><!-- .wrapper --> </body></html> И CSS #menu {width:1112px;height:690px;margin:0 auto;} .container{ width:1112px; height:303px; position:relative; overflow:hidden; background:transparent url(../img/bg_m.png) no-repeat top left;-webkit-box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);-moz-box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);font-family:Pt Sans Caption; } #title {font-size:13px;margin-left:365px; } #title1 {font-size:13px;margin-left:85px; }ul#menu{ list-style:none; position:absolute; bottom:0px; font-size:14px; color:#fff;width:1112px;height:303px;}ul#menu li{ float:left; margin:132px 0px 0px 0px;height:303px;}ul#menu .about{ cursor:pointer; position:relative; float:left; width:556px;} ul#menu .work{ cursor:pointer; position:relative; float:left; line-height:20px; width:278px;}ul#menu a{ cursor:pointer; position:relative; float:left; bottom:-95px; line-height:20px; width:200px;word-wrap:break-word;}.icon_about{width:556px; height:303px; display:block; position:absolute;}.icon_work,.icon_post,.icon_mag,.icon_sotr,.icon_st,.icon_help{ width:278px; height:303px; display:block; position:absolute;}.icon_about{ background:transparent url no-repeat top left;}.icon_work{ background:transparent url(../images/globe.png) no-repeat top left;}.icon_help{ background:transparent url(../images/help.png) no-repeat top left;}.icon_search{ background:transparent url(../images/find.png) no-repeat top left;}ul#menu span.title{ display:block; height:px; text-shadow:1px 1px 1px #000; color:#B7B7B6; text-indent:10px;}ul#menu span.description_about{ width:556px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_h.png) no-repeat top left;padding-top:27px; } ul#menu span.description_work{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_f.png) no-repeat top left;padding-top:27px;} ul#menu span.description_help{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_f.png) no-repeat top left;padding-top:27px;} .container_o{ width:1112px; height:303px; margin:40px auto; position:relative; overflow:hidden;background:transparent url(../img/bg_m2.png) no-repeat top left;-webkit-box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);-moz-box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);box-shadow: 7px 7px 10px 5px rgba(46, 50, 50, 0.4);font-family:Pt Sans Caption; } ul#menu span.description_post{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_m.png) no-repeat top left;padding-top:27px;} ul#menu span.description_mag{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_m.png) no-repeat top left;padding-top:27px;} ul#menu span.description_sotr{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_m.png) no-repeat top left;padding-top:27px;} ul#menu span.description_st{ width:278px;height:303px; color:#fff; display:block; font-size:24px;background:transparent url(../img/link_m.png) no-repeat top left;padding-top:27px;} #navi { width:208px;} ul#navmenu-v,ul#navmenu-v li,ul#navmenu-v ul {margin: 0;padding: 0;width: 208px; list-style: none; } ul#navmenu-v:after { content: ".";height: 0;visibility: hidden;} ul#navmenu-v li {float: left; position: relative;} ul#navmenu-v a {padding: 0px 7px;display: block;color: #73bde0;font: 13px Pt_sans, sans-serif;text-decoration: none;height: auto !important;height: 1%; } ul#navmenu-v a:hover,ul#navmenu-v li:hover a {background: #4195b9;color: #FFF; } ul#navmenu-f li:hover {text-decoration:underline;background-color:#FFF;} ul#navmenu-v ul,ul#navmenu-v ul ul,ul#navmenu-v ul ul ul {display: none;position: absolute;top: 0;left: 180px;} ul#navmenu-v li:hover ul ul,ul#navmenu-v li:hover ul ul ul,ul#navmenu-v li.iehover ul ul,ul#navmenu-v li.iehover ul ul ul {display: none;} ul#navmenu-v li:hover ul,ul#navmenu-v ul li:hover ul,ul#navmenu-v ul ul li:hover ul,ul#navmenu-v li.iehover ul,ul#navmenu-v ul li.iehover ul,ul#navmenu-v ul ul li.iehover ul {display: block;} Но здесь вытекает следующая проблема. Я не могу добавить списки меню в эти блоки.
