Это в CSS:
.blockmenu {height:20px;width: 160px;font: normal 11px Arial, Helvetica, sans-serif;text-align: left;}
.blockmenu a:link,.blockmenu a:visited {height:20px;width: 180px;color:#DCDCDC;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background: url(http://up-rise.ru/Design/1/img/24.png)no-repeat;text-align: left;}
.blockmenu a:hover {height:20px;width: 180px;color:#ffffff;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background:url('http://up-rise.ru/Design/1/img/25.png')no-repeat;text-align: left;}
$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
<span class="blockmenu">
<script type="text/javascript" src="/js/sliding_effect.js"></script>
<ul id="sliding-navigation">
<li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>OUR WEB-SITE</b></font></h3></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="/" style="padding-left: 15px; "><b>Г</b>лавная страница</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//forum/" style="padding-left: 15px; "><b>Н</b>аш Форум</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//news/" style="padding-left: 15px; "><b>Н</b>овости</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//load/" style="padding-left: 15px; "><b>К</b>аталог файлов</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//forum/14" style="padding-left: 15px; "><b>Б</b>аннерообмен</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//search" style="padding-left: 15px; "><b>П</b>оиск по сайту</a></li>
<li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>DESPERADOS TEAM</b></font></h3></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//team_structure" style="padding-left: 15px; "><b>С</b>труктура команды</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»MTA</b></a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»SA:MP</b></a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//news/novosti_kasajushhiesja_komandy_desp/1-0-1" style="padding-left: 15px; "><b>Н</b>овости команды</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//index/ustav_komandy/0-7" style="padding-left: 15px; "><b>У</b>став команды</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>Т</b>урниры</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="//team_graphics" style="padding-left: 15px; "><b>Г</b>рафика команды</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>В</b>ступление</a></li>
<li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>И</b>стория</a></li>
</span>
</ul>
| 
