懸停在下拉串列上時如何顯示下拉串列

我正在制作一個下拉選單，其中一切都按預期作業。但是當我將滑鼠懸停在下拉選單串列上時，它沒有顯示下拉選單，它正在消失。這是代碼..請幫助我..自 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>

標籤：

上一篇：如何為輪廓邊框內的內容提??供填充

下一篇：標題的背景顏色不會改變