title: How to make dropdown in html overlap another div
body: <p>So I got a navigation bar and some of the items there are having a dropdown menu when you hover over them. Right below the nav bar, there is a slideshow of images. The problem is that everytime I hover on the dropdowns, The slideshow div gets in the way so the dropdown menu cant be seen.
  <a href="https://i.stack.imgur.com/LlU2e.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/LlU2e.jpg" alt="enter image description here"></a></p>
  
  <p>i have the ff html code </p>
  
  <pre><code>  &lt;div class="dropdown"&gt;
        &lt;li class="dropbtn"&gt;About Us&lt;/li&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="#"&gt; Overview and History&lt;/a&gt;
          &lt;a href="#"&gt;Vision&lt;/a&gt;
          &lt;a href="#"&gt;Objectives&lt;/a&gt;
          &lt;a href="#"&gt;Organization&lt;/a&gt;
          &lt;a href="#"&gt;About NEU&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>    .dropbtn {
  background-color: inherit;
  color: black;
  padding: 12px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  }
  
  .dropdown {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0px;
  }
  
  .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
  display: block;
  }
  
  .dropdown:hover .dropbtn {
  background-color:  #0099ff;
  }
  </code></pre>