<div id="listGde31Ru">
  <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="#">И</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="#">С</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="#">Ъ</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>
  </ul>
</div>

<script>/*<![CDATA[*/$(function(){$("#listGde31Ru").css("overflow","hidden").wrapInner("<div id='mover' />");var c,d=9.2,e=-1,b=$("#listGde31Ru a"),a=b.length-10;b.each(function(f){$(this).attr("data-pos",f)}).hover(function(){c=$(this);c.addClass("hover");$("#mover").css("top",-(c.data("pos")*d-0));e=c.data("pos")},function(){$(this).removeClass("hover")})});/*]]>*/</script>

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