小贝子编程

下拉菜单重叠到其他菜单



如果我单击"人力资源" 将出现链接下拉链接，客户端想要完整的宽度菜单，但是下拉菜单在第二行菜单上重叠，如果下拉菜单为打开的第二行将滑下。

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 链接。

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

预先感谢。

添加ul的样式，即

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

to 

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

部分解决方案：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);
    });

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium