Выпадающее меню время от времени исчезает при наведении на него над <h1>

Question

При наведении курсора на раскрывающееся меню, оно время от времени исчезает при наведении курсора на него. Я хотел бы, чтобы в моем раскрывающемся меню можно было постоянно навести курсор мыши и не исчезать. Я не смог найти способ исправить эту проблему. Я попытался увеличить z-index до 9999 в классе .mydropdown-content, но это не сработало. Наконец, я работаю над этим, установив ниже:

h1 {
    margin-top: 0.5rem;
}

Я ищу исправление, а не обходной путь. Спасибо.

    .topnav {
        overflow: hidden;
        background-color: #333;
    }

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .topnav a.active {
        background-color: #7e57c2;
        color: white;
    }

    /* Dropdown container - needed to position the dropdown content */
    .mydropdown {
      float: left;
      overflow: hidden;
    }

    /* Style the mydropdown button to fit inside the topnav */
    .mydropdown .dropbtn {
      font-size: 17px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    /* Style the mydropdown content (hidden by default) */
    .mydropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 99999;
    }

    /* Style the links inside the mydropdown */
    .mydropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    /* Add a dark background on topnav links and the mydropdown button on hover */
    .topnav a:hover, .mydropdown:hover .dropbtn {
      background-color: purple;
      color: white;
    }

    /* Add a grey background to mydropdown links on hover */
    .mydropdown-content a:hover {
      background-color: #CE93D8;
      color: black;
    }

    /* Show the mydropdown menu when the user moves the mouse over the mydropdown button */
    .mydropdown:hover .mydropdown-content {
      display: block;
    }

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


<div class="topnav" id="myTopnav">
        <a href="https://www.example.com/" class="active">Home</a>
        <div class="mydropdown">
            <button class="dropbtn">Menu1
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="mydropdown-content">
                <a href="https://www.example.com/">Submenu1</a>
                <a href="https://www.example.com/">Submenu2</a>
            </div>
        </div>
        <div class="mydropdown">
            <button class="dropbtn">Menu2
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="mydropdown-content">
                <a href="https://www.example.com/">Submenu1</a>
                <a href="https://www.example.com/">Submenu2</a>
                <a href="https://www.example.com/">Submenu3</a>
            </div>
        </div>
        <a href="https://www.example.com/">Menu3</a>
    </div>
    <h1>My Long Header</h1>

Answer 1

Вы должны добавить relative позицию к элементу .topnav. Я удалил бесполезные стили, вы можете проверить пример ниже.

.topnav {
  background-color: #333;
  display: flex;
  position: relative;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #7e57c2;
  color: white;
}

/* Style the mydropdown button to fit inside the topnav */
.mydropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the mydropdown content (hidden by default) */
.mydropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Style the links inside the mydropdown */
.mydropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the mydropdown button on hover */
.topnav a:hover,
.mydropdown:hover .dropbtn {
  background-color: purple;
  color: white;
}

/* Add a grey background to mydropdown links on hover */
.mydropdown-content a:hover {
  background-color: #ce93d8;
  color: black;
}

/* Show the mydropdown menu when the user moves the mouse over the mydropdown button */
.mydropdown:hover .mydropdown-content {
  display: block;
}

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

<div class="topnav" id="myTopnav">
  <a href="https://www.example.com/" class="active">Home</a>
  <div class="mydropdown">
    <button class="dropbtn">
      Menu1
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="mydropdown-content">
      <a href="https://www.example.com/">Submenu1</a>
      <a href="https://www.example.com/">Submenu2</a>
    </div>
  </div>
  <div class="mydropdown">
    <button class="dropbtn">
      Menu2
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="mydropdown-content">
      <a href="https://www.example.com/">Submenu1</a>
      <a href="https://www.example.com/">Submenu2</a>
      <a href="https://www.example.com/">Submenu3</a>
    </div>
  </div>
  <a href="https://www.example.com/">Menu3</a>
</div>
<h1>My Long Header</h1>