javascript - 下拉菜单与其他菜单重叠

Question

如果我点击 “人力资源” 链接下拉菜单将出现，客户想要全宽菜单，但下拉菜单与第二行菜单重叠，我希望如果下拉菜单打开，第二行将向下滑动。

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 。

如果我对你们不清楚，我提前道歉。

提前致谢。

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