html - 修复 bootstrap 4 中的一个菜单问题，避免每个子下拉菜单相互重叠

Question

这几乎是我想要获得的:

我会在这个codepen中解释我的问题:

CodeLink

/** 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？如何？因为我已经把他们放在一个绝对的位置上，他们的 parent 是相对的。

Answer 1

添加到下拉菜单顶部 "38px

.dropdown-menu{
	top:38px !important;
	border: none !important;
	border-radius: 0 !important;
	color: black;
	/*display: block!important;*/
	/*box-shadow: 1px 1px 6px #767676;*/
}