Drop down menu under slide show - html

Question

I have drop down menu which use css for acting like menu :-
#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 > 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;
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>
Category
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Contact us
</li>
<li>
About us
</li>
</ul>
</nav>
<br style="clear:both;" />
<div class="slidshow_container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
<div class="text">image 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
<div class="text">image 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
<div class="text">image 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/ 4</div>
<img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
<div class="text">image 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
But when I move the mouse over the category menu the blow list get under the image of slide menu like image below:-
So how can I solve this problem ?

Answer 1

z-index will fix your problem,
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element
with a lower stack order.
Note: z-index ONLY works on positioned elements (position:absolute,
position:relative, or position:fixed).
Syntax :
z-index: auto|number|initial|inherit;
Initial value: auto
Applies to positioned elements
Inherited no
https://developer.mozilla.org/en/docs/Web/CSS/z-index
#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;
/* Here Put z-index*/
z-index:9999;
}
#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 > 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;
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>
Category
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Contact us
</li>
<li>
About us
</li>
</ul>
</nav>
<br style="clear:both;" />
<div class="slidshow_container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" />
<div class="text">image 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" />
<div class="text">image 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" />
<div class="text">image 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/ 4</div>
<img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" />
<div class="text">image 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>