在选项卡中添加悬停下拉选择

Question

我在设置选项卡中悬停显示选择时遇到问题，下面是我的编码：

原编码：

<div class="topnav">
<span id="curTime" class='hide'>&nbsp;</span>
<div class="btn-group">
<a style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a> 
</div>
</div>

我试过的编码：

<style>
.dropdown-content a:hover {background-color: #ddd;}

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

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

</style>

<div class="topnav">
<span id="curTime" class='hide'>&nbsp;</span>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
  <div class="dropdown-content">
    <a href="#">test 1</a>
    <a href="#">test 2</a>
    <a href="#">test 3</a>
  </div>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a> 
</div>
</div>

我试过的编码输出如下所示：

我的原始输出如下所示：

当我的鼠标指针移动到设置选项卡时，我想要如下图所示的预期结果：

希望有人能指导我如何解决这个问题。谢谢。

Answer 1

<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>

首先，你在一个 html 标签中有 2 个 class 属性，将它们全部放在一个标签中：

<a class="dropbtn btn btn-metis-1 btn-sm" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom"
<i class="fa fa-align-justify"></i>
</a>

检查是否解决了您的问题

Answer 2

我添加了 .dropdown-content 和 .dropdown-content a CSS 来生成您想要的输出。请参阅运行代码段以了解详细信息。

编辑1：修改详情请见评论。

/* Add dropdown-content CSS */

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  z-index: 9;
}


/* Add .dropdown-content a */

.dropdown-content a {
  display: block;
  background: #f1f1f1;
  text-decoration: none;
  color: black;
}

/* Edit 1: Add .dropdown */
.dropdown {
  display: inline-block; /* Change display from block to inline-block */
}

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

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <span id="curTime" class='hide'>&nbsp;</span>
  <div class="dropdown">
    <a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
      <i class="fa fa-align-justify"></i>
    </a>
    <div class="dropdown-content">
      <a href="#">test 1</a>
      <a href="#">test 2</a>
      <a href="#">test 3</a>
    </div>
  </div>
  <!-- Edit 1: Move logout button out of dropdown menu -->
  <a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
    <i class="fa fa-power-off"></i>
  </a>
</div>

在选项卡中添加悬停下拉选择

Add the hover dropdown selection in the tab

html

css

mousehover