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

Question

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

下面的代码将显示一个汉堡图标；Andesite峰"；当我将鼠标悬停在图标上时，下拉菜单会正确显示。问题是，在我将鼠标悬停在图标上之前，菜单会连续显示。当我将鼠标悬停在图标上时，它会被替换为正确的菜单实例。我做错了什么？

.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 */
}

代码片段：

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