And the question is this. I make the menu vertical ... an idea (when hovering over one of these links (buttons), an arrow should appear alongside it smoothly, but for me they immediately crawl out for all links (buttons). Code below
<div class="navigation-text-menu_head"> <img style="position:absolute; margin-left:-2px;" src="images/block_menu.png">Меню</div> <div id="navigation-text-menu"> <ul> <style type="text/css"> #navigation-text-menu { background: #2b2a2a; border: 1px solid #ccc; border-radius: 5px; height: 230px; margin-left: -3px; margin-top: 9px; width: 275px; } #navigation-text-menu ul { list-style: none; } #navigation-text-menu li { border-bottom: 1px solid #676665; margin-left: -40px; } #navigation-text-menu li a { background: #2b2a2a; color: #fff; display: block; font-size: 13px; padding: 9px 9px 10px 15px; text-decoration: none; } #navigation-text-menu ul li img { display: none; padding-right: 10px; } </style> <script type="text/javascript"> $(document).ready(function () { $('#navigation-text-menu ul li a').hover(function () { $(this).fadeIn('fast', function () { $('#navigation-text-menu ul li img').fadeIn(10000); }).animate({ backgroundColor: "#165b95", paddingLeft: '50px' }, 500); }, function () { $(this).animate({ backgroundColor: "#2b2a2a", paddingLeft: 15 }, 500); }); }); </script> <li><a href="#"><img src="images/arrow-menu.png">Главная</a></li> <li><a href="#"><img src="images/arrow-menu.png">Руководства</a></li> <li><a href="#"><img src="images/arrow-menu.png">Файлы</a></li> <li><a href="#"><img src="images/arrow-menu.png">Серверы</a></li> <li><a href="#"><img src="images/arrow-menu.png">Форум</a></li> <li><a href="#"><img src="images/arrow-menu.png">Турниры</a></li> </ul> </div> 
