html - 如何在下拉菜单旁边显示子菜单

Question

我有一个主菜单栏，其中有一个下拉菜单，并且该菜单有一个子菜单。如何让子下拉菜单显示在第一个下拉菜单中“下拉 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

Answer 1

将其添加到样式表的底部。

.sub-dropdown{
  position: relative;
}
.sub-dropdown-menu{
  left: 100%;
  top: 0;
}

更多信息请点击 http://codepen.io/hunzaboy/pen/jyRoWB