How to fix dropdown menu created with bootstrap

Question

I am creating a dropdown menu. This is the first time I have used bootstrap. I'm having one problem with the display.

The following code will display a hamburger icon with the title "Andesite Peak" to the right of it. When I hover over the icon, the dropdown menu appears correctly. The problem is that before I hover over the icon the menu is displayed continuously. It is replaced with the correct instance of the menu when I hover over the icon. What am I doing wrong?

.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

You can hide the dropdown content initially by changing the value of the CSS property display of your class dropdown-content from inline-block to none:

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

Code snippet:

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