How to make dropdown in html overlap another div
<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>