javascript - 具有三个层次结构的顶部水平导航栏

有人可以帮我顶一下导航栏吗？我正在尝试制作一个下降3级的下拉菜单。我已经有2个级别了，我的第3个级别很混乱。我尝试以与2级相同的方式执行此操作，但是它不起作用。谢谢！

这是JsBin https://jsbin.com/harukif/edit

CSS的一部分：

li a:hover {
  background-color: #c0b283;
  color: white;
}

.dropdown:hover .dropbtn {
  background-color: #c0b283;
}

li.dropdown {
  display: inline-block;
  text-align: left;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.content{
  margin-top:75px;
}

最佳答案

尝试将位于div的absolute用于第三级：

top: 0;
left: 100%;

这将导致第三个菜单出现在第二个菜单的当前悬停元素的右侧。

这就是代码中的样子-https://jsbin.com/cizoxagubu/1/edit?html,css,output

关于javascript - 具有三个层次结构的顶部水平导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46274724/