什么是创建具有以下外观的下拉菜单的最简单/最好的方式(具有奇怪的边界并且需要是动态的)

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包含),这将给我一个框,使用左/右/顶部边框对父li进行z索引以获得连接两个框然后可能添加一个额外的div来覆盖任何重叠的父李.我想知道是否有更好的方法？

Answer 1

试试这个...花了一点时间才弄清楚，我还没有测试它的跨浏览器，但它适用于 IE 9。可能需要调整。

我添加了一个具有高 z-index 的 div 来掩盖嵌套的顶部边框的一部分<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>