Dear Friends,
I am facing a problem wuth Dropdown list menu and slider. When i click manu dropdown list is opening behind the slider. Please, check my HTML code and css.
<!DOCTYPE html> <html> <head> <title>Hello!</title> <link type="text/css" rel="stylesheet" href="styl.css" /> <?php
include ("header.php");
?> </head> <body> <div id="container"> <div id="contant"> <div id="contantleft"> <div id="outerbox>"> <div id="sliderbox"> <img src="images/mslider/cl3.png" /> </div> </div> </div><!----Contantleft End -----> <?php include('sidebar.php') ?> </div><!-----Contant End----> </div><!-----Container End------> <?php include('footer.php') ?> </body> </html>and below is css code
body{color: #3f312e; background:url('Images/bg6.jpg') no-repeat Fixed 100%; background-size:100% ;font:14px Helvetica, Arial, sans-srif; }
img{border:none; }
#header{width:1200px; min-height:50px; margin:0 auto; }
*{
margin: 0px;
padding:0px;
}
#navigation{
width:1200px;
margin:0 auto;
position:relative;
top:4px;
z-index: 1000px; }
#navigation ul{
margin:0;
padding:0;
list-style-type:none;
}
#navigation ul li{
background-color: #2F91BC;
border: 1px solid black;
width: 155px;
height: 35px;
border:1px solid black;
line-height:35px;
text-align: center;
float: left;
position: relative;
border-radius: 8px;
}
#navigation ul li a{
display:block;
color: white;
background: #2F91BC;
text-decoration:none;
padding:10px 10px 6px 10px;
text-transform: uppercase;
background-color: #2F91BC;
border-radius: 8px;
}
#navigation ul li.current_page_item a, #navigation ul li a:hover {
color:gray;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right:1px solid #fff;
background: #fff;
}
#navigation ul ul{
position: absolute;
display:none;
}
#navigation ul li:hover> ul {
display:block;
}
#container{overflow: auto; width:1200px; ; margin:0 auto; padding:0px; }
#contant{width:1200;overflow:auto; margin:0 auto; }
#contantleft{width:815px; float:left; margin-right:20px; padding: 20px; border:1px solid black;}
#contantleft h1{font-size: 24px; margin-top: 0; }
#contantleft h4{font-size: 14px; margin-top: 0;width:580px; }
#outerbox{
width:820px;
overflow:hidden;
}
#sliderbox{
position:relative;
width:10881px;
animation-name:sprint;
animation-duration:45s;
animation-iteration-count:infinite;
}
#sliderbox img{ float:left;
}
@keyframes sprint{
0%{
left:0px;
}
10%{
left:0px;
}
12.5%{
left:-837px;
}
22.5%{
left:-837px;
}
25%{
left:-1674px;
}
35%{
left:-1674px;
}
37.5%{
left:-2511px;
}
47.5%{
left:-2511px;
}
50%{
left:-3348px;
}
60%{
left:-3348px;
}
62.5%{
left:-4185px
}
72.5%{
left:-4185px;
}
75%{
left:-5022px;
}
85%{
left:-5022px
}
87.5%{
left:-5859px;
}
97.5%{
left:-5859px;
}
100%{
left:-6696px;
}
}