jQuery анимация нижняя прокладка

Question

У меня есть еще один новичок в вопросе о моем сценарии jQuery. У меня есть сценарий, который немного изменяет меню. Первая проблема заключается в том, что <a> как-то получает нижнюю прокладку, и я не знаю, почему и как. Второй вопрос заключается в том, как заполнить весь <td> элементом <a>. Я начинаю работать в jQuery и искал способы узнать, так что будьте терпеливы со мной. Спасибо за любые ответы.

JQuery Код:

$(document).ready(function(){ 
    $('.menu a').hover(function(){ 
     $(this).stop().animate({width: '180px'}, "slow"); 
    }, function(){ 
     $(this).stop().animate({width: '160px'}, "slow"); 
    }); 
}); 

jsFiddle демо: Here

Answer 1

Вы не должны использовать таблицу для меню. Для этого нет никаких оснований. Используйте неупорядоченный список вместо этого, как:

<ul id="menu"> 
    <li><a href="#">Menu Item 1</a></li> 
    <li><a href="#">Menu item 2</a></li> 
</ul> 

Вы могли бы стиль как:

#menu {list-style-type: none; margin:0;padding:0;} 
#menu > li {background: #8B0B04;width: 160px;padding: 7px 30px 7px 0px;} 
#menu a {color: #A9A582;text-decoration: none; font: 17px bold Helvetica;width: 100%; height: 100%} 

Что касается вашего второго вопроса, я не уверен, что вы имеете в виду? (:

Edit:

О и JQuery вы можете просто изменить его на:.

$(document).ready(function(){ 
    $('#menu > li').hover(function(){ 
     $(this).stop().animate({width: '180px'}, "slow"); 
    }, function(){ 
     $(this).stop().animate({width: '160px'}, "slow"); 
    }); 
}); 

И с редактированием теперь я понимаю, ваш второй вопрос, который я сделал скрипку:

http://jsfiddle.net/k8vsA/