html - 修复 bootstrap 4 中的菜单问题,避免每个子下拉菜单相互重叠
问题描述
这几乎是我想要获得的:
我将在这个codepen中解释我的问题:
/** Main Nav **/
#main-nav{
margin:0 auto;
padding-top: 10px;
padding-bottom: 10px;
}
#main-nav .container-fluid{
max-width:1366px;
/**overflow:hidden;**/
/*margin-top:5px;
margin-top:5px;*/
}
#logo-container{
text-align:center;
}
#menu-container{
padding:0;
}
#menu-container ul {
padding-left: 0px;
/*display: inline;
list-style: none;*/
}
.btn {
color: #000;
background-color: #FFF;
border-color: #FFF;
font-family: 'Daxline Medium';
font-size: 1.1rem;
border-bottom: 2px solid transparent!important;
}
.btn.dropdown-toggle.no-after::after {
content: " " !important;
border: 0 !important;
margin-top: 23px;
margin-left: 0.5em !important;
}
.btn:hover{
color: #000;
background-color: #FFF;
border-color: #FFF;
/*font-family: 'Daxline Bold';*/
font-weight: bold;
border-bottom: 2px solid #e41a2e!important;
border-radius: 0px;
/*letter-spacing: 0px;*/
}
.btn:focus{
outline:none !important;
box-shadow: none !important;
font-family: 'Daxline Bold';
border-bottom: 2px solid #e41a2e;
border-radius:0px;
}
.dropdown-menu{
top:-2px !important;
border: none !important;
border-radius: 0 !important;
color: black;
/*display: block!important;*/
/*box-shadow: 1px 1px 6px #767676;*/
}
.dropdown-toggle::after{
font-family: FontAwesome;
content: "\f106" !important;
border:0 !important;
color:#818181;
font-size: 1.4rem;
vertical-align:unset !important;
margin-left:0.5em !important;
}
.dropdown:hover>.dropdown-menu {
display: block;
/*margin-top: 50px;*/
}
.dropdown-menu > .sub-dropdown-menu {
position: absolute;
top: 0%;
left: 100%;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
/*border: 1px solid rgba(0,0,0,.15);*/
}
.dropdown-item:hover {
/*background: background: #F9F7F5;*/
/*position: relative;*/
}
.dropdown-item:hover + .sub-dropdown-menu {
display: block;
}
.sub-dropdown-menu:hover {
display: block;
}
#menu-container ul li{
display: inline;
}
.dropdown{
width:fit-content;
margin: 0 25px;
}
#phone-container-mobi{
display:none;
}
#search-container-mobi{
display:none;
}
#menu-container-mobi{
display:none;
}
#featured-wrapper-mobi{
display:none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menu-container" class="col-sm-9">
<ul class="main-menu">
<li class="dropdown show">
<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">About</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Page 1</a>
<ul class="sub-dropdown-menu">
<li><a class="dropdown-item" href="#">Page 1</a></li>
<li><a class="dropdown-item" href="#">Page 2</a></li>
</ul>
<a class="dropdown-item" href="#">Page 2</a>
<ul class="sub-dropdown-menu">
<li><a class="dropdown-item" href="#">Page 3</a></li>
<li><a class="dropdown-item" href="#">Page 4</a></li>
</ul>
</div>
</li>
<li class="dropdown show">
<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">Programs</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Page 1</a>
<a class="dropdown-item" href="#">Page 2</a>
</div>
</li>
<li class="dropdown show">
<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">Locations</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">Page 1</a>
<a class="dropdown-item" href="#">Page 2</a>
</div>
</li>
<li class="dropdown show">
<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">Admissions</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">Page 1</a>
<a class="dropdown-item" href="#">Page 2</a>
</div>
</li>
<li class="dropdown show">
<a class="btn dropdown-toggle" href="#" data-toggle="dropdown">Employment Services</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Page 1</a>
<a class="dropdown-item" href="#">Page 2</a>
</div>
</li>
<li class="dropdown show">
<a class="btn dropdown-toggle no-after" href="#" data-toggle="dropdown">Blog</a>
</li>
</ul>
</div>
在这里你可以注意到我的菜单不像我希望的那样工作。
主导航列表 (ul) 的每个菜单项 (li) 都有一个下拉菜单,每个下拉菜单都有一个子下拉菜单。
现在我的问题是,在悬停(css)上,我想在我的下拉菜单(li)右侧打开另一个子下拉菜单,这将匹配他父母的高度。
我使用 position:absolute 属性来定位它们,但由于某种原因这不起作用,因此每个子下拉菜单都会相互重叠。
我的标记 (HTML) 有问题还是应该修复我的 CSS?如何?由于我已经将它们置于与它们的父母相关的绝对位置,它们处于相对位置。
解决方案
添加到下拉菜单顶部“38px
.dropdown-menu{
top:38px !important;
border: none !important;
border-radius: 0 !important;
color: black;
/*display: block!important;*/
/*box-shadow: 1px 1px 6px #767676;*/
}
推荐阅读
- python - 通过 python 库调用函数 AudioConfig.FromWavFileInput 时出现问题
- c++ - 带增强绑定的异步接受
- python - 动态编程 - 4 键键盘
- javascript - Chrome devtools 悬停窗口
- java - java.lang.SecurityException:发送短信:uid 10282 没有 android.permission.SEND_SMS
- c# - Xamarin iOS 11.2 中的 Environment.TickCount 替代方案
- julia - Julia 在 BLAS 中有点积吗?
- google-apps-script - setFormulas() 覆盖值, setValues() 覆盖公式
- python - ModuleNotFound 导入海龟困境
- scala - SparkSQL/JDBC 错误 com.microsoft.sqlserver.jdbc.SQLServerException:列、参数或变量 #7:找不到数据类型 BLOB