Javascript 下拉菜单与其他菜单重叠
如果我点击“人力资源”链接下拉列表将出现，客户需要全宽菜单，但下拉列表在第二行菜单上重叠，如果下拉列表打开，第二行将向下滑动 HTMLJavascript 下拉菜单与其他菜单重叠,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如果我点击“人力资源”链接下拉列表将出现，客户需要全宽菜单，但下拉列表在第二行菜单上重叠，如果下拉列表打开，第二行将向下滑动 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-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>
$(".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);
});
提前感谢。为ul添加样式，即从
.el-menu-holder .dropdown-menu {
left: 12px;
right: 12px;
margin-top: -9px;
padding: 0 0 10px;
}
<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>
.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: "";
}
$(".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);
});
<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>
.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: "";
}
$(".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);
});
是的，我这样做了，但我想下拉宽度100%在页面上，如果我添加相对。下拉菜单，它将只采取33.33%的col-md-3宽度。我希望您能理解。那么您希望右侧的项目显示在哪里？我希望所有项目的位置相同，但一旦下拉列表将显示第二行项目，如“运费”、“管理”和“设计”将向下滑动。其他第一行项目，如“IT”和“财务”，它们将保持在相同的位置。感谢Kiran的帮助。