<script src='http://webo4ka.ru/Ucoz3/prokrutka_ccilok_v_bloke_jquery.min.js'></script>

<style>
#list {
text-align: center;
border: 1px solid #ccc;
width: 200px;
overflow: auto;
height: 100px;
position: relative;
font-size: 14px;
line-height: 1.4;
font-family: Georgia, Helvetica, Arial, Sans-Serif;
margin: 0 auto;
border-radius: 5px;
box-shadow: 0px 0px 15px #ccc;
}
#list ul {
list-style-type: none;
}
#list li {
margin-left: -40px;
}
#list a {
text-decoration: none;
display: block;
color: #000;
}
#mover {
position: absolute;
width: 100%;
padding-top: 0px;
height: 200px;
}
#list .hover {
font-weight: bold;
font-size: 18px;
color: red;
}
</style>

<script>
$(function() {
$("#list").css("overflow", "hidden").wrapInner("<div id='mover' />");
var $el,
speed = 9.2,
cur = -1,
items = $("#list a"),
max = items.length - 10;
items
.each(function(i) {
$(this).attr("data-pos", i);
})
.hover(function() {
$el = $(this);
$el.addClass("hover");
$("#mover").css("top", -($el.data("pos") * speed - 0));
cur = $el.data("pos");
}, function() {
$(this).removeClass("hover");
});
});
</script>

<div id="list">
<ul>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Навигация</a></li>
<li><a href="#">Иконки</a></li>
<li><a href="#">Разное</a></li>
<li><a href="#">Закладки</a></li>
<li><a href="#">Склад</a></li>
<li><a href="#">Помощь</a></li>
<li><a href="#">Обратная связь</a></li>
<li><a href="#">webo4ka</a></li>
</ul>
</div>