У меня есть следующий html
<ul id="header">
<li class="dropdown"><span>Our Locations</span>
<ul>
<li><a href="">London</a></li>
<li><a href="">New York</a></li>
</ul>
</li>
<li class="dropdown"><span>Language Selector</span>
<ul>
<li><a href="">English</a></li>
<li><a href="">German</a></li>
<li><a href="">French</a></li>
<li><a href="">Chinese</a></li>
<li><a href="">Mandarin</a></li>
</ul>
</li>
</ul>
И я пытаюсь получить меню, которое выглядит следующим образом
Сложность - странная форма фона и тот факт, что текст будет меняться при переводе сайта.
В настоящее время у меня есть следующий код javascript
(function ($) {
$.fn.dropDownMenu = function () {
$.each(this, function () {
var li = $(this);
li.hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
}, function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
});
});
}
$(function () {
$(".dropdown").dropDownMenu();
});
})(jQuery);
. Единственный способ, которым я могу видеть, что он работает, - это абсолютное позиционирование внутреннего ul (содержащегося в li.dropdown), которое даст мне поле, z-индексируя родительский li сверху, используя левая / правая / верхняя границы, чтобы получить соединение двух блоков, а затем, возможно, добавить дополнительный div, чтобы покрыть любые перекрывающиеся родительские li. Интересно, есть ли лучший способ?