悬停时显示 DIV 子菜单下拉菜单

Question

我正在尝试使用 DIV 创建一个非常简单的悬停/下拉菜单，而不是 UL/LI。 我当前的代码显示了带有 3 个选项的菜单，但我需要的是在链接 2 下有一个子菜单。 这是我当前的代码。

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

    <div class="dropdown">
      <button class="dropbtn">^</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>

我想做的是：

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
        <div class="submenu">
            <a href="#">SubLink 1</a>
        </div>
    <a href="#">Link 3</a>
  </div>
</div>

当您将鼠标悬停在链接 2 上时，子链接 1 项目出现的位置，但我尝试的所有方法都不起作用，所以我希望其他人可以提供帮助。

Answer 1

您可以通过以下方式做到这一点，您需要做的就是设置一个包含子菜单和悬停链接的 div（此处为 submenu_holder），下一步很简单，因为它与 submenu_holder 的过程相同带有下拉菜单。

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 0px;
        font-size: 12px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
      margin-top:200px;
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 30px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
        bottom: 100%;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    .subdiv {
        display:none;
    }
    
    .dropdown:hover .subdiv {
        display:block;
    }

.submenu {
  display:none;
  position:absolute;
  left:60px;
  top:0px;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 2

您的代码中存在一些问题。

对于初学者，子菜单的类名不对应。

下面，我将子菜单的内容包裹在内链接2。您需要进一步调整以使悬停效果更平滑...

body {
  /* for demo purposes */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 0px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  /* changed because the target was infuriatingly small for demo */
  padding: 1em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover,
.submenu:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  bottom: 100%;
}

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

.submenu {
  padding: 12px 16px;
}

.submenu-content {
  display: none;
}

.submenu-content a {
  padding: 12px 0;
}

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

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
What I would like to do is this:

<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu">Link 2
      <div class="submenu-content">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 3

这是我最终使用的代码，最适合我的情况：

<style>

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 0px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 30px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
    bottom: 100%;
}

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

.subdiv {
    display:none;
}

.dropdown:hover .subdiv {
    display:block;
}

.submenu {
  display:none;
  position:absolute;
  left:86px;
  top:0px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.submenu_holder:hover .submenu {
  display:block;
}

.submenu_holder {
  position:relative;
}

</style>


<div class="dropdown">
  <button class="dropbtn">^</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <div class="submenu_holder">
      <a href="#">Link 2</a>
      <div class="submenu">
        <a href="#">SubLink 1</a>
      </div>
    </div>
    <a href="#">Link 3</a>
  </div>
</div>