如何修复使用引导程序创建的下拉菜单

Question

我正在创建一个下拉菜单。这是我第一次使用引导程序。我的显示器有一个问题。

以下代码将在其右侧显示一个标题为“Andesite Peak”的汉堡包图标。当我将鼠标悬停在图标上时，下拉菜单会正确显示。问题是在我将鼠标悬停在图标上之前，菜单会连续显示。当我将鼠标悬停在图标上时，它会替换为正确的菜单实例。我做错了什么？

.tour_title {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  display: block;
  text-align: left;
  position: absolute;
  width: 650px;
  top: 60px;
  left: 65px;
}

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

.dropdown-content {
  display: inline-block;
  position: absolute;
  font-size: 14px;
  font-weight: normal;
  min-width: 100px;
  background-color: #F9F9F9;
  min-width: 120px;
  z-index: 1;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="tour_title">
  <div class="dropdown" style="padding-right: 10px">
    <img src="../../assets/icons/hamburger_trans.png" width="20px" height="13px" alt="Hamburger icon" />
    <p class="dropdown-content">
      <a href="#">Link 1</a><br/>
      <a href="#">Link 2</a><br/>
      <a href="#">Link 3</a><br/>
    </p>
  </div>
  Andesite Peak
</div>

Answer 1

您最初可以通过将您的班级dropdown-content 的CSS 属性display 的值从inline-block 更改为none 来隐藏下拉内容：

.dropdown-content {
  display: none;
  /* other properties */
}

代码sn-p：

.tour_title {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  display: block;
  text-align: left;
  position: absolute;
  width: 650px;
  top: 60px;
  left: 65px;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 14px;
  font-weight: normal;
  min-width: 100px;
  background-color: #F9F9F9;
  min-width: 120px;
  z-index: 1;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="tour_title">
  <div class="dropdown" style="padding-right: 10px">
    <img src="../../assets/icons/hamburger_trans.png" width="20px" height="13px" alt="Hamburger icon" />
    <p class="dropdown-content">
      <a href="#">Link 1</a><br/>
      <a href="#">Link 2</a><br/>
      <a href="#">Link 3</a><br/>
    </p>
  </div>
  Andesite Peak
</div>