javascript - 如何在下拉菜单下创建下拉菜单

Question

我想要一个下拉菜单，它可以一直往下拉，而不是像下图那样往右下拉

我知道如何创建一个只在下面的下拉菜单，就像这张照片一样

我当前的 HTML 代码:

<div class="nav navbar-fixed-top">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a href="#">Consumer Management</a>
      <ul>
        <li class="tuto2"><a href="#">www.e-homes.com.my</a></li>
          <ul>
            <li><a href="#">hehe</a></li>
          </ul>
        </ul>
      </li>

我当前的 CSS 样式:

.nav li {

  font-size: 1.2em;
  text-align: left;
  width: 220px;
  line-height: 60px;
  font-size: 1.4em;
  display: inline-block;
  margin-right: -7px;
 }

.nav a {

  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  transition: .3s background-color;
 }

.nav a:hover {
  background-color: #005f5f;
 }


.nav li li {
  font-size: .8em;
 }



 @media screen and (min-width: 650px) {

 .nav > ul > li {
   text-align: center;
  }

.nav > ul > li > a {
  padding-left: 0;
  }

.nav li ul {
  position: absolute;
  display: none;
  width: inherit;
  }

.nav li:hover ul {
  display: block;
 }

.nav li ul li {
  display: block;
   }
 }

有没有人知道CCS风格让它向右走？

Answer 1

你可以简单地这样做:

.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}

<ul class="outer">
  <li class="home"><a href="#">Home</a></li>
  <li class="tutorials"><a href="#">Consumer Management</a>
    <ul>
      <li class="tuto2"><a href="#">www.e-homes.com.my</a>
        <ul>
          <li><a href="#">hehe</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>