悬停在下拉串列上时如何显示下拉串列-编程知识-白鹭情

我正在制作一个下拉选单，其中一切都按预期作业。但是当我将鼠标悬停在下拉选单串列上时，它没有显示下拉选单，它正在消失。这是代码..请帮助我..自 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>

uj5u.com热心网友回复：

你需要给你的dropdown-content容器:hover。此外，标签的默认样式为h3元素提供了 margin-top 和 margin-bottom。您想要的是填充以使其空间更大，直到您能够悬停在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>

uj5u.com热心网友回复：

您需要将鼠标悬停在 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>