каков был бы самый простой / лучший способ создать раскрывающееся меню следующего вида (имеет нечетные границы и должно быть динамическим )

У меня есть следующий 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. Интересно, есть ли лучший способ?