0

如果你看一下下面的 jsfiddle，它有 3 个下拉菜单（DROP1、DROP2、DROP3）。第一个的内容粘在左边缘，但是第二个和第三个的内容就在它们各自的按钮下方开始。

jsfiddle：http: //jsfiddle.net/6a3eZ/73/

问题是：如何使第二个和第三个下拉菜单的内容也粘在左边缘（而不用负边距对其应用不同的样式）。

非常感谢。

jQuery(document).ready(function ($) {
    jQuery('.menu ul').slideUp(0);

    jQuery('.menu li.sub').click(function () {
        var target = jQuery(this).children('a');
        if(target.hasClass('menu-expanded')){
            target.removeClass('menu-expanded');
        }else{
            jQuery('.menu-item > a').removeClass('menu-expanded');
            target.addClass('menu-expanded');
        }
        jQuery(this).find('ul:first')
                    .slideToggle(400)
                    .end()
                    .siblings('li')
                    .find('ul')
                    .slideUp(400);
    });
});
4

1 回答 1

0

新小提琴

通过添加position: absolute和left: 0到子菜单，它会粘在左侧。

ul.sub-menu {
    position: absolute;
    left: 0;
    ...
}

发生这种情况是因为它相对于下一个具有fixed,relative或absolute定位的父容器。这就是#menu.

问题是，子菜单脱离了正常流程，底部的三个菜单项重叠了。

于 2013-06-19T12:41:03.317 回答