Проблема позиционирования JQuery

Question

Я пытался создать панель меню с JQuery, которую можно увидеть здесь, нажав кнопку Preview вверху:

http://jsbin.com/amexi/edit

Проблема:

Если вы наведите курсор мыши на Ссылка Два или Ссылка Три , черная панель отлично заменит соответствующую синюю ссылку, однако если вы наведите курсор на Ссылка Один черная панель находится чуть ниже этой ссылки. Что я там не так делаю? Как я могу это исправить?

Спасибо.

Answer 1

Необходимо учитывать маржу, автоматически примененную к <ul> элементам.

Если вы посмотрите на свою страницу с помощью Firebug, вы заметите, что Firefox применяет верхнее и нижнее поле в 16px.

Answer 2

Выезд http://jsbin.com/amexi/5/edit

Я просто не могу понять, почему ТОП одинаков во всех всплывающих окнах, НО фактическое их расположение отличается. Не имеет смысла. Это почти как отрицательная разница.

Основная проблема, которую я обнаружил, заключается в том, что вы не переместили всплывающее окно в положение ссылки + не сместили его в .top + .height.

Answer 3

Как указано выше, вы можете применить значение margin-top -16px к классу .left, чтобы получить желаемое поведение.

http://jsbin.com/amexi/3/edit