jquery - jquery下拉菜单边框问题

Question

这是我制作的小提琴：http: //jsfiddle.net/8ML3u/

我需要模拟这种下拉菜单 ( #topnav)，其中底部边框与上菜单元素所在的位置合并。我想出了这个解决方案，但它不够灵活，在不同的浏览器中出现故障，而且在 IE8 中根本不起作用。我对如何制作这种菜单感到非常困惑。我能做些什么？

这是我想要做的：http: //i39.tinypic.com/2zghfnt.png

编辑：对不起，我可能还不够清楚，但菜单应该是完全透明的，并且它背后的背景不是静态的。

Answer 1

我编辑这个小提琴：http://jsfiddle.net/8ML3u/1/

现在你可以看到了。这样对吗？

Answer 2

这是我的解决方案，我使用了与您所拥有的方法类似的方法，我动态附加了一个元素以显示缺少的边框部分，并通过在 CSS 中已有大部分样式并且只需要计算宽度来使其更简单：

Javascript

$(document).ready(function () {
    $('#topnav > li').hover(function () {
        if ($(this).children('ul').length > 0) {
            var submenu = $(this).find('ul:first');
            var border = $('<div class="border">').css('width', submenu.width() - $(this).width() + 'px');
            submenu.before(border);
            $(this).css('border-bottom','transparent');
        }
    }, function () {
        $(this).find('.border').remove();
    });
});

CSS

.border {
    height: 1px;
    border-bottom: 1px grey solid;
    position: absolute;
    left: 100%;
    bottom: -1px;
}

示例小提琴