0

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;
  }
  }
1
Contributor
1
Reply
11
Views
1 Year
Discussion Span
Last Post by zebnoon1
0

yes i solved problem
with add
z-index:1000
in #navigation ul li {} div
anyways thx

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.