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

Question

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

Answer 1

Попробуйте это ... потребовалось немного времени, чтобы выяснить это, и я не тестировал его для кросс-браузерного режима, но он работает в IE 9. Вероятно, потребуется настроить.

Я добавил div с высоким z-индексом, чтобы замаскировать часть верхней границы для вложенного <ul>

CSS:

#header {
    margin:0;
    padding:6px 0 5px 0;
    background-color:#FFFFFF;
    list-style-type:none;
}

li.dropdown {
    position:relative;
    display:inline;
    margin:0;
    padding:0;

}

div.borderMask {
    position:absolute;
    display:none;
    background-color:#FFFFFF;
    padding:1px;
    height:1px;
    line-height:1px;
    right:0px;
    left:0px;
    top:13px;
    z-index:1000;
}   

li.dropdown ul {
    position:absolute;
    display:none;
    background-color:#FFFFFF;
    border:solid 1px #CCCCCC;
    width:150px;
    right:-1px;
    top:13px;
}

li.dropdown:hover {
    background-color:#FFFFFF;
    border-top:solid 1px #CCCCCC;
    border-left:solid 1px #CCCCCC;
    border-right:solid 1px #CCCCCC;
}

li.dropdown:hover ul {
    display:inline;
}
li.dropdown:hover div.borderMask {
    display:block;
}

HTML:

<ul id="header">
    <li class="dropdown"><span>Our Locations</span>
        <div class="borderMask"></div>
        <ul>
            <li><a href="">London</a></li>
            <li><a href="">New York</a></li>
        </ul>
    </li>
    <li class="dropdown"><span>Language Selector</span>
        <div class="borderMask"></div>
        <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>