2
我有一个主菜单栏，它有一个下拉菜单，该菜单有一个子菜单。如何获得子下拉菜单在第一个下拉菜单中显示在“下拉2”链接的左侧？我还想将子菜单的顶部对齐到“下拉2”链接的顶部。现在它出现在链接的左下方。如何在下拉菜单中显示子菜单
HTML：
<img src="#" width="100%" height="100px">
<div class="TopMenuBar">
<ul>
<li><a href="#">Side</a></li>
<li class="dropdown"><a href="#">menu</a>
<div class="dropdown-menu">
<ul>
<li><a href="#">drop down 1</a></li>
<li class="sub-dropdown"><a href="#">drop down 2</a>
<div class="sub-dropdown-menu">
<ul>
<li><a href="#">sub drop down 1</a></li>
<li><a href="#">sub drop down 2</a></li>
</ul>
</div>
</li>
<li><a href="#">drop down 3</a></li>
</ul>
</div>
</li><a href="#">Bar</a></li>
</ul>
</div>
<div class="SideMenuBar">
<ul>
<li><a href="#">Side</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Bar</a></li>
</ul>
</div>
<h1>h1 Header</h1>
<main>
<h2>h2 Header</h2>
<p>Main paragraph</p>
<a href="#">Main link</a>
<ul>
<li>Main list item</li>
<li>Main list item</li>
<li>Main list item</li>
</ul>
<h2>h2 Header</h2>
<p>Main paragraph</p>
<a href="#">Main link</a>
<ul>
<li>Main list item</li>
<li>Main list item</li>
<li>Main list item</li>
</ul>
</main>
CSS：
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul, .dropdown-menu>ul, .sub-dropdown-menu>ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a, .dropdown-menu a, .sub-dropdown-menu a{
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.TopMenuBar a:hover {
background-color: #b14eb1;
color: black;
}
.dropdown-menu {
}
.dropdown-menu, .sub-dropdown-menu{
display: none;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu{
display: block;
}
.sub-dropdown:hover .sub-dropdown-menu{
display: table;
}
.SideMenuBar {
background-color: orange;
margin-left: 20px;
margin-top: 0;
display: flex;
height: 100vh;
float: left;
}
.SideMenuBar ul {
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.SideMenuBar li a {
color: white;
text-decoration: none;
padding: 20px;
display: list-item;
}
.SideMenuBar li a:hover {
background-color: #fcbf7e;
color: black;
}
main {
padding-left: 10px;
display: table
}
h1 {
text-align: center;
}
这里是一个工作模型在codepen