css position dropdown menu issue - html

Question

I have a menu that is appearing behind the banner. I need to show it over the banner.
By removing the :
.ei-slider-large li{
position: absolute;
}
its solve the issue, but then the banner is not working.
Below are details of my implementation :
Menu:
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.php'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li><span>Our Story</span></li>
<li><span>Our Leadership Team</span></li>
<li><span>Testimonials</span></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Our Services</span></a>
<ul>
<li><a href='geopolitical.php'><span>Geo-Political Risk Management</span></a></li>
<li><a href='security.php'><span>Security & Business Continuity</span></a></li>
<li><a href='business.php'><span>Business Resiliency</span></a></li>
<li><a href='integrity.php'><span>Integrity & Assurance</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Insights</span></a>
<ul>
<li><a href='alerts_ads.php'><span>Alerts & Advisories</span></a></li>
<li><a href='research.php'><span>Research</span></a></li>
<li><a href='news_events.php'><span>News & Events</span></a></li>
</ul>
</li>
<li><a href='csr.php'><span>CSR</span></a></li>
<li class='has-sub '><a href='#'><span>Contact Us</span></a>
<ul>
<li><a href='our_office.php'><span>Our Offices</span></a></li>
</ul>
</li>
</ul>
</div>
menu css:
#cssmenu:after,
#cssmenu ul:after {
display: block;
clear: both;
}
#cssmenu a {
color: #333;
display: inline-block;
font-size: 15px;
font-weight:bold;
padding: 0 20px;
margin-left:10px;
margin-right:10px;
text-decoration: none;
border:1px solid #FFF;
}
#cssmenu a:hover {
position: relative;
top: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul > li {
float: left;
padding: 0 10px;
position: relative;
}
#cssmenu > ul > li.active a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
border:1px solid #CCC;
}
#cssmenu > ul > li.active a:hover {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
}
#cssmenu > ul > li.has-sub-active > a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
display: block;
color:#569C17;
border:1px solid #CCC;
}
#cssmenu .has-sub-active:hover ul {
display: block;
}
#cssmenu .has-sub-active a {
display: block;
position: relative;
}
#cssmenu .has-sub-active a:after {
}
#cssmenu .has-sub-active ul {
background: #FFF;
display: none;
padding: 10px 0;
position: absolute;
left: 50%;
top: 41px;
margin-left: -70px;
width: 200px;
z-index: 1;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu .has-sub-active ul li:hover > a {
background: #dddddd;
color: #569C17;
font-size:12px;
}
#cssmenu .has-sub-active ul a {
line-height: 100%;
padding: 8px 0;
font-size:12px;
color:#333;
}
#cssmenu > ul > li:hover > a {
background: #FFF;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
position: relative;
color:#569C17;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu > ul > li a {
line-height: 39px;
}
#cssmenu > ul > li a:hover {
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub a {
display: block;
position: relative;
}
#cssmenu .has-sub a:after {
}
#cssmenu .has-sub ul {
background: #FFF;
display: none;
padding: 10px 0;
position: absolute;
left: 50%;
top: 41px;
margin-left: -70px;
width: 200px;
z-index: 1;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
}
#cssmenu .has-sub ul li:hover > a {
background: #dddddd;
color: #569C17;
font-size:12px;
}
#cssmenu .has-sub ul a {
line-height: 100%;
padding: 8px 0;
font-size:12px;
color:#333;
}
banner:
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li> <img src="images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h3>Geo-Political Risk Management</h3>
</div>
</li>
<li> <img src="images/large/2.jpg" alt="image02" />
<div class="ei-title">
<h3>Security & Business Continuity</h3>
</div>
</li>
<li> <img src="images/large/3.jpg" alt="image03"/>
<div class="ei-title">
<h3>Business Resiliency</h3>
</div>
</li>
<li> <img src="images/large/4.jpg" alt="image04"/>
<div class="ei-title">
<h3>Integrity & Assurance</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li>Slide 1<img src="images/thumbs/1.jpg" alt="thumb01" /></li>
<li>Slide 2<img src="images/thumbs/2.jpg" alt="thumb02" /></li>
<li>Slide 3<img src="images/thumbs/3.jpg" alt="thumb03" /></li>
<li>Slide 4<img src="images/thumbs/4.jpg" alt="thumb04" /></li>
</ul>
<!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
banner css:
.ei-slider{
position: relative;
width: 100%;
max-width: 1920px;
height: 400px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
.ei-title{
position: absolute;
right: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 30px;
line-height: 70px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #000;
}
.ei-slider-thumbs{
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 100%;
z-index: 10;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
position: absolute;
bottom: 50px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 13px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Answer 1

The problem is in your z-index.
As you can see, you've given your #cssmenu .has-sub ul { z-index:1; }
And your .ei-slider-thumbs li img { z-index:999; }
Try setting the z-index of your menu to 9999 or lowering/removing the z-index of your slider.