title: How to show the dropdown when hovering over the dropdown list
body: <p>I am making a dropdown menu where everthing is working as expected. But when I hover over the dropwdown menu list than it is not showing the dropdown menu, it is dissapering. Here is the code.. Pls help me.. I am stuck with this error since 1 month.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
      &lt;h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn"&gt;HOME&lt;/h3&gt;
      &lt;a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn"&gt;ABOUT US&lt;/a&gt;
       
  
      &lt;div id="dropdown" class="animate__animated animate__rollIn" &gt;  
          &lt;h3 class="dropbtn"&gt;STRATEGY&lt;/h3&gt;
          &lt;div class="dropdown-content"&gt;
              &lt;a href="Short Straddle with Divisor Based SL.html"&gt;Short Straddle with Divisor Based SL&lt;/a&gt;
              &lt;a href="short straddle sl.html"&gt;Short Straddle with Trailing SL&lt;/a&gt;
              &lt;a href="straddlesimple.html"&gt;09:20 Straddle (Simple)&lt;/a&gt;
              &lt;a href="straddle shift sl.html"&gt;09:20 Straddle (Shift SL to Cost)&lt;/a&gt;
              &lt;a href="straddle roll the pending.html"&gt;09:20 Straddle (Roll the Pending Leg)&lt;/a&gt;
              &lt;a href="index combo.html"&gt;Index Combo&lt;/a&gt;
              &lt;a href="index option buying.html"&gt;Index Option Buying&lt;/a&gt;
          &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>