Выпадающий список с полями

Question

У меня есть выпадающий список языков в верхнем левом углу страницы. Проблема в том, что, когда мышь нависает над этим положением, меню соскальзывает. Может ли кто-нибудь сказать мне, как избежать такого эффекта? Вот ссылка - http://livedemo07682.prestatrend.com и вот код:

//Block languages module 
    $('#languages_switcher').hover(function() { 
     $(this).find('#languages_block_top span').addClass('hover'); 
     $(this).find('#first-languages').stop(true, true).slideDown(300); 
    }, function() { 
     $(this).find('#languages_block_top span').removeClass('hover'); 
     $(this).find('#first-languages').stop(true, true).slideUp(150); 
    }); 

Answer 1

#first-languages_wrapper { 
    /* top: 1em Remove this line */ 
    bottom: 4px; /* Add this one */ 
} 

EDIT:

Это происходит потому, что область Маржа находится вне границ #languages_switcher. У вас есть два варианта.

1. Вместо top: 1em в меню, поместите padding-bottom: 1em в #languages_switcher.

2. Удалить top: 1em и заменить его border-top: 1em solid transparent

Answer 2

надстройки дополнения к элементу

#languages_switcher { 
    float: left; 
    margin-left: -1px; 
    padding-bottom: 1em; 
} 

Answer 3

Чтения над своими комментариями я считать, что вы хотите, что падение 1em от вашего языка переключателя и ваше раскрывающееся меню, хотя я не понимаю, почему это выглядит неполированным и несовместимым с остальными вашими навигационными барами, но вот исправление.

Вместо того, чтобы отбрасывать свое подменю с помощью top:1em, просто отбросьте его с помощью верхнего слоя, таким образом вы можете растянуть контейнер вдоль его оси и это падение маржи не повлияет на событие зависания;

CSS

#first-languages_wrapper { 
    padding-top:1em; 
} 

Хотя я бы порекомендовал вам бросить его top:100% вместо этого, выглядит более чище.