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

Question

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

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

我想做的是：

<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上时，SubLink 1项目显示在哪里，但我尝试的所有内容都不起作用，所以我希望其他人可以提供帮助。

Answer 1

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

＆＃13;

＆＃13;

    .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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

下面，我已经在链接2中包含子菜单的内容。您需要进一步调整以使悬停效果更流畅......

＆＃13;

＆＃13;

array(4) { ["id"]=> string(1) "3" ["name"]=> string(7) "a@a.com" ["email"]=> string(7) "a@a.com" ["password"]=> string(1) "a" } Username and Password are not found

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

keyframes