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

<强> Example fiddle

jquery下拉菜单边框问题

2 个答案: