下拉菜单与其他菜单重叠

时间：2016-12-21 13:10:13

标签： javascript jquery html css

如果我点击“人力资源”链接下拉列表，客户需要全宽菜单，但下拉列表在第二行菜单上重叠，我想如果下拉列表打开，第二行将向下滑动。< / p>

HTML 

<div class="eservices-list">
                <div class="row eservices-list-menu">
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">
                            <div class="eservices-title">Human Resource</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">Human Resource</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">

                            <div class="eservices-title">IT</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">IT</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">

                            <div class="eservices-title">Finance</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">Finance</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row eservices-list-menu">
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">

                            <div class="eservices-title">Freight</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">Freight</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">

                            <div class="eservices-title">Administration</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">Administration</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-sm-4 el-menu-holder">
                        <div class="eservices-holder">

                            <div class="eservices-title">Design</div>
                        </div>
                        <ul class="list-unstyled dropdown-menu"> <span class="title">Design</span>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                            <li><a href="eservices-form.html">Title Goes here</a></li>
                        </ul>
                    </div>
                </div>
            </div>

CSS 

.eservices-list-menu {
    position: relative;
}

.el-menu-holder {
    position: static;
}

.el-menu-holder .dropdown-menu {
    left: 12px;
    right: 12px;
    margin-top: -9px;
    padding: 0 0 10px;
}

.el-menu-holder .dropdown-menu:after {
    content: none;
}

.el-menu-holder .dropdown-menu .title {
    background-color: #936dab;
    font-size: 18px;
    color: #fff;
    display: block;
    padding: 5px 10px;
}

.el-menu-holder .dropdown-menu li {
    margin-top: 0;
    width: 25%;
    float: left;
}

.el-menu-holder .dropdown-menu li a {
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #ebebeb;
    display: block;
    margin: 10px 11px 0;
    height: 50px;
    line-height: 51px;
    padding: 0 13px;
    color: #936dab;
    font-size: 15px;
    position: relative;
}

.el-menu-holder .dropdown-menu li a:hover {
    text-decoration: none;
    background-color: #d9d9d9;
}

.el-menu-holder .dropdown-menu li a:after {
    background-color: #936dab;
    height: 2px;
    position: absolute;
    width: 100%;
    bottom: -1px;
    left: 0;
    right: 0;
    content: "";
}

JQuery的 

$(".eservices-holder").click(function () {
        $(this).parent().children(".dropdown-menu").slideToggle(300);
        $(this).parent().siblings().children(".dropdown-menu").slideUp(300);
        $(this).parent().parent().siblings(".row").children().children(".dropdown-menu").slideUp(300);
    });

以下是Codepen LINK 。

如果我不清楚你们，我很抱歉。

提前致谢。

2 个答案:

答案 0 :(得分：1)

为ul添加样式，即来自

.el-menu-holder .dropdown-menu {
left: 12px;
right: 12px;
margin-top: -9px;
padding: 0 0 10px;

}

到

.el-menu-holder .dropdown-menu {
left: 12px;
right: 12px;
margin-top: -9px;
padding: 0 0 10px;
position:relative;
}

答案 1 :(得分：0)

部分解决方案： Html的更改是

 <div class="eservices-list">

            <div class="row eservices-list-menu">

                <div class="col-md-4 col-sm-4 el-menu-holder">
                    <div class="eservices-holder">
                        <div class="eservices-title">Human Resource</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">Human Resource</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-4 el-menu-holder">
                    <div class="eservices-holder">

                        <div class="eservices-title">IT</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">IT</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-4 el-menu-holder">
                    <div class="eservices-holder">

                        <div class="eservices-title">Finance</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">Finance</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
              <div class="col-md-12 content" style="width:100%!important"></div>
            </div>
            <div class="row eservices-list-menu">
                <div class="col-md-4 col-sm-4 el-menu-holder">
                    <div class="eservices-holder">

                        <div class="eservices-title">Freight</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">Freight</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-4 el-menu-holder">
                    <div class="eservices-holder">

                        <div class="eservices-title">Administration</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">Administration</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
                <div class="col-md-4 el-menu-holder">
                    <div class="eservices-holder">

                        <div class="eservices-title">Design</div>
                    </div>
                    <ul class="list-unstyled dropdown-menu"> <span class="title">Design</span>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                        <li><a href="eservices-form.html">Title Goes here</a></li>
                    </ul>
                </div>
            </div>
        </div>

Css更改

        .eservices-list-menu {
        position: relative;
    }

    .el-menu-holder {
        position: static;
    }

    .el-menu-holder .dropdown-menu {
        left: 12px;
        right: 12px;
        margin-top: -9px;
        padding: 0 0 10px;
      position:relative;
      min-width:100vw;
    }

    .el-menu-holder .dropdown-menu:after {
        content: none;
    }

    .el-menu-holder .dropdown-menu .title {
        background-color: #936dab;
        font-size: 18px;
        color: #fff;
        display: block;
        padding: 5px 10px;
    }

    .el-menu-holder .dropdown-menu li {
        margin-top: 0;
        width: 25%;
        float: left;
    }

    .el-menu-holder .dropdown-menu li a {
        background-repeat: no-repeat;
        background-position: 95% center;
        background-color: #ebebeb;
        display: block;
        margin: 10px 11px 0;
        height: 50px;
        line-height: 51px;
        padding: 0 13px;
        color: #936dab;
        font-size: 15px;
        position: relative;
    }

    .el-menu-holder .dropdown-menu li a:hover {
        text-decoration: none;
        background-color: #d9d9d9;
    }

    .el-menu-holder .dropdown-menu li a:after {
        background-color: #936dab;
        height: 2px;
        position: absolute;
        width: 100%;
        bottom: -1px;
        left: 0;
        right: 0;
        content: "";
    }

javascript更改

    $(".eservices-holder").click(function () {
        var content = $(this).parent().children(".dropdown-menu");
         $(this).parent().parent().find(".content").html(content.html());
        $(this).parent().siblings().children(".dropdown-menu").slideUp(300);  
        $(this).parent().parent().siblings(".row").children().children(".dropdown-menu").slideUp(300);
    });
相关问题
最新问题