使用CSS

Question

在CSS中，此链接中提供了一个子菜单（Link 1，Link2，Link3）。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

我正在尝试在上面的子菜单下创建子菜单（链接4.1，链接4.2），如下图所示。 我怎样才能得到这个子菜单。

我在下面尝试过。但这是重叠的。我是CSS的新手。请分享您的想法

<div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="dropdown">Link 1</div>
    <div class="dropdown-content">
        <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 

Answer 1

这可以通过简单的html / css工作完成，所以只是为了给出一个想法，这是一个简单的例子：

＆＃13;

＆＃13;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #000;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #000;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: #001;
}

li:hover>ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

li:hover a {
  background: #000;
}

li:hover li a:hover {
  background: #000;
}

ul ul ul {
  left: 100%;
  top: 0;
}

＆＃13;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">First level Menu</a>
    <ul>
      <li><a href="#">Second Level</a></li>
      <li><a href="#">Second Level with third level</a>
        <ul>
          <li><a href="#">Third level</a></li>
          <li><a href="#">Third level</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;