将鼠标悬停在下拉列表上时如何显示下拉列表

Question

我正在制作一个下拉菜单，其中一切都按预期工作。但是当我将鼠标悬停在下拉菜单列表上而不是它没有显示下拉菜单时，它正在消失。这是代码..请帮助我..自 1 个月以来我一直遇到这个错误。

#dropdown {
    position: relative;
    width: 18%;
    left: 5%;
    display: inline-block;
  }
  
  .dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    z-index: 1;
    height: 90%;
    right: 5%;
    overflow-y: hidden;
    right: 5%;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 850%;
  }
  
  .dropdown-content a:hover {
      background-color: #f1f1f1
    }
  
  .dropbtn:hover + .dropdown-content {
    visibility: visible;
  }

<div class="header">
    <h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn">HOME</h3>
    <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn">ABOUT US</a>
     

    <div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content">
            <a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
            <a href="short straddle sl.html">Short Straddle with Trailing SL</a>
            <a href="straddlesimple.html">09:20 Straddle (Simple)</a>
            <a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
            <a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
            <a href="index combo.html">Index Combo</a>
            <a href="index option buying.html">Index Option Buying</a>
        </div>
        <br><br><br><br><br><br><br><br><br>
        </div>

Answer 1

您需要将鼠标悬停在 id 下拉列表中才能正常工作

#dropdown:hover .dropdown-content {   visibility: visible;
    display:block;}

#dropdown {
    position: relative;
    width: 18%;
    left: 5%;
    display: inline-block;
  }
  
  .dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    z-index: 1;
    height: 90%;
    right: 5%;
    overflow-y: hidden;
    right: 5%;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 850%;
  }
  
  .dropdown-content a:hover {
      background-color: #f1f1f1
    }
  

#dropdown:hover .dropdown-content {   visibility: visible;
    display:block;}

<div class="header">
    <h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn">HOME</h3>
    <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn">ABOUT US</a>
     

    <div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content">
            <a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
            <a href="short straddle sl.html">Short Straddle with Trailing SL</a>
            <a href="straddlesimple.html">09:20 Straddle (Simple)</a>
            <a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
            <a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
            <a href="index combo.html">Index Combo</a>
            <a href="index option buying.html">Index Option Buying</a>
        </div>
        <br><br><br><br><br><br><br><br><br>
        </div>

Answer 2

您需要将 dropdown-content 的容器提供给 :hover。此外，h3 标签的默认样式为元素提供了 margin-top 和 margin-bottom。您想要的是填充以使其 space 变大，直到您能够悬停到 dropdown-content 本身。请参阅下面的代码片段以了解我的意思。

h3{
  margin: 0;
  padding-block: 1rem;
}

#dropdown {
  position: relative;
  width: 18%;
  left: 5%;
  display: inline-block;
}

.dropdown-content {
  visibility: hidden;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  z-index: 1;
  height: 300px;
  right: 5%;
  overflow-y: hidden;
  right: 5%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 850%;
}

.dropdown-content:hover {
  visibility: visible;
}

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

.dropbtn:hover+.dropdown-content {
  visibility: visible;
}

<div class="header">
  <h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn">HOME</h3>
  <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn">ABOUT US</a>


  <div id="dropdown" class="animate__animated animate__rollIn">
    <h3 class="dropbtn">STRATEGY</h3>
    <div class="dropdown-content">
      <a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
      <a href="short straddle sl.html">Short Straddle with Trailing SL</a>
      <a href="straddlesimple.html">09:20 Straddle (Simple)</a>
      <a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
      <a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
      <a href="index combo.html">Index Combo</a>
      <a href="index option buying.html">Index Option Buying</a>
    </div>
    <br><br><br><br><br><br><br><br><br>
  </div>

将鼠标悬停在下拉列表上时如何显示下拉列表

How to show the dropdown when hovering over the dropdown list

html

css

drop-down-menu