Drop down menu under slide show
<p>I have drop down menu which use css for acting like menu :-</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> #primary_nav_wrap
{
    background:url("../img/footer_lodyas.png")no-repeat center center fixed;
    display:inline-block;
    width:800px;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:black;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    line-height:50px;
    padding:0 15px;
    font-family:yekan,montserratAltenates;
}

#primary_nav_wrap ul li
{
    position:relative;
    display:inline-block;
    float:right;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:rgba(255, 153, 0, 0.7);
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover &gt; ul
{
    display:block
}

    .slidshow_container{
    max-width:800px;
    position:relative;
    margin:0;
    padding:0;
}

.mySlides{
    position:relative;
    margin:0;
    padding:0;
}

.numbertext{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    padding:10px;
    color:white;
}

.prev,.next{
    cursor:pointer;
    position:absolute;
    padding:10px;
    color:white;
    margin:auto;  
    top:150px;
    font-size:30px;
    border-radius:0px 3px 3px 0px;

}

.next:hover{
    background:rgba(40,40,40,0.8);
    border-radius:3px 0px 0px 3px;

}

.prev:hover{
    background:rgba(40,40,40,0.8);
}

.next{
    right:0;
}

.mySlides .text{
    font-family:yekan,montserratAltenates;
    font-size:15px;
    position:absolute;
    bottom:0px;
    padding:20px;
    margin-bottom:5px;
    width:800px;
    text-align:center;
    color:white;
    background:rgba(35, 35, 35, 0.60);
    overflow:hidden;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="primary_nav_wrap"&gt;
            &lt;ul&gt;
                &lt;li class="current-menu-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Category&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;&lt;/li&gt;                      
                        &lt;li&gt;&lt;a href="#"&gt;Sub Menu 5&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;Contact us&lt;/a&gt;
                    
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;About us&lt;/a&gt;                  
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;br style="clear:both;" /&gt;
        &lt;div class="slidshow_container"&gt;
            &lt;div class="mySlides fade"&gt;
                &lt;div class="numbertext"&gt;1 / 4&lt;/div&gt;
                &lt;img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" /&gt;
                &lt;div class="text"&gt;image 1&lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="mySlides fade"&gt;
                &lt;div class="numbertext"&gt;2 / 4&lt;/div&gt;
                &lt;img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" /&gt;
                &lt;div class="text"&gt;image 2&lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="mySlides fade"&gt;
                &lt;div class="numbertext"&gt;3 / 4&lt;/div&gt;
                &lt;img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" /&gt;
                &lt;div class="text"&gt;image 3&lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="mySlides fade"&gt;
                &lt;div class="numbertext"&gt;4/ 4&lt;/div&gt;
                &lt;img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" /&gt;
                &lt;div class="text"&gt;image 4&lt;/div&gt;
            &lt;/div&gt;

            &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
            &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
        &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>But when I move the mouse over the category menu the blow list get under the image of slide menu like image below:-</p>

<p><a href="https://i.stack.imgur.com/hJyVq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hJyVq.png" alt="enter image description here"></a></p>

<p>So how can I solve this problem ?</p>