Javascript 创建具有以下外观的下拉菜单的最简单/最佳方法是什么（具有奇怪的边框，需要动态）

我有下面的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>

---

我能看到可能工作的唯一方法是绝对定位内部ul（包含在li.下拉列表中），它将给我一个框，使用左/右/上边框在顶部对父li进行z索引，以获得两个框的连接，然后可能添加一个额外的div来覆盖任何重叠的父li。我想知道是否有更好的方法？

试试这个。。。我花了一点时间才弄明白，我还没有测试过它的跨浏览器功能，但它可以在IE9上运行。可能需要调整

我添加了一个具有高z索引的div，以屏蔽嵌套的

CSS:

HTML:

我们的位置





语言选择器

只要稍加努力，我想您就可以使用CSS使下拉列表正常工作。我现在没有时间发布解决方案。@qw3n我最终得到了一个纯html/css解决方案，使用了一个额外的div来覆盖边框，我只是出于兴趣想知道是否可以使用边框图像来完成一个更干净的解决方案？我最近才注意到itI会说，因为它相对来说是已知的，而且肯定不兼容跨浏览器，所以不用担心。提供的解决方案可能是最好的格式。另外，你也需要做同样多的工作来获得你想要的边界图像。非常感谢，我没想到为我完成的完整解决方案是一个很好的惊喜：）

(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);

#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;
}

<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>