CODEWITHSUNDEEP
javascriptjquerycss
Dilukshan Mahendra
Dilukshan Mahendra

Reputation: 3398

CSS: Navigation Drop down comes behind the image slider

I have created the following web page and added Beaver Image Slider resontly but when the image slider runs the navigation drop downs are displaying behind the images and cannot navigate to the links in the drop down.Which looks like

enter image description here

Here is my code

http://jsfiddle.net/dilukshan/n4gcV/

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>DoIT</title>
      <link href="<?php echo BASE_URL; ?>static/css/style.css" rel="stylesheet" type="text/css" />


       <script src="<?php echo BASE_URL; ?>static/js/jquery-1.11.0.min.js"></script>  
       <script src="<?php echo BASE_URL; ?>static/js/beaverslider.js"></script>
       <script src="<?php echo BASE_URL; ?>static/js/beaverslider-effects.js"></script>

        <script>

    $(function(){
      var slider = new BeaverSlider({
        structure: {
          container: {
            id: "my-slider",
            width: 920,
            height: 500
          }
        },
        content: {
          images: [
            "<?php echo BASE_URL; ?>static/images/img1.png",
            "<?php echo BASE_URL; ?>static/images/img2.png"
          ]
        },
        animation: {
          effects: effectSets["slider: big set 2"],
          interval: 3000
        }
      });   
    });

    </script>

   </head>
   <body>
      <div class="contentarea">
         <?php include 'header.php';?>
         <div class="clear"></div>
         <div class="level">
            <div class="imgsliderarea">
                 <div id="my-slider"></div>
            </div>
         </div>
         <div class="clear"></div>
         <div class="level">
            <div class="summaryboxarea">
               <div class="summarybox">
                  <div class="shadowmkr">
                     <center>
                        <img src="<?php echo BASE_URL; ?>static/images/Flaticon_14323.png" width="128" height="128" />
                     </center>
                     <h2 align="center">Who We Are</h2>
                     <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
                     <center><a href="#" class="button-orange">Read More</a></center>
                  </div>
               </div>
               <div class="summarybox">
                  <div class="shadowmkr">
                     <center>
                        <img src="<?php echo BASE_URL; ?>static/images/Flaticon_42968.png" width="128" height="114" />
                     </center>
                     <h2 align="center">What Makes Our Courses Unique</h2>
                     <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
                     <center><a href="#" class="button-orange">Read More</a></center>
                  </div>
               </div>
               <div class="summarybox">
                  <div class="shadowmkr">
                     <center>
                        <img src="<?php echo BASE_URL; ?>static/images/Flaticon_44520.png" width="128" height="128" />
                     </center>
                     <h2 align="center">What Makes Our Solutions Unique</h2>
                     <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
                     <center><a href="#" class="button-orange">Read More</a></center>
                  </div>
               </div>
            </div>
         </div>
         <div class="clear"></div>
         <div class="level">
            <div class="newsarea">
               <div class="newsbox">
                  <div class="shadowmkr">
                     <div class="captionbar orangegradient">&nbsp; News and Events</div>
                     <div class="spacebar"></div>
                     <p align="justify"><img style="margin-right:10px" align="left" src="<?php echo BASE_URL; ?>static/images/student.png" width="187" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.</p>
                     <br />
                  </div>
               </div>
               <div class="offerbox">
                  <div class="shadowmkr">
                     <div class="captionbar orangegradient">&nbsp; Special Offer</div>
                     <div class="spacebar"></div>
                     <p align="justify"><img align="left" src="<?php echo BASE_URL; ?>static/images/special_offer.png" width="162" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
                  </div>
               </div>
            </div>
         </div>
         <div class="clear"></div>
         <div class="level">
            <div class="newsarea">
               <div class="newsbox">
                  <div class="captionbar orangegradient">&nbsp; Technology Friends</div>
                  <div class="clear"></div>
                  <div align="center" class="freecontent">
                     <img src="<?php echo BASE_URL; ?>static/images/java-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/php-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/mysql-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/netbeans-logos.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/wordpress-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/html5-logos.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/css3-logos.png" width="60" height="60" />
                  </div>
               </div>
               <div class="offerbox">
                  <div class="captionbar orangegradient">&nbsp; Find Us</div>
                  <div class="freecontent" align="center"><img src="<?php echo BASE_URL; ?>static/images/LinkedIn-icon.png" width="54" height="54" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/Facebook-icon.png" width="54" height="54" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="<?php echo BASE_URL; ?>static/images/Twitter-icon.png" width="54" height="54" /></div>
               </div>
            </div>
         </div>
      </div>
      <div class="clear"></div>
      <div class="level orangegradient">
         <div class="footerarea">
            <div class="termsdiv"><a href="#" style="text-decoration:none;color:#FFF">Privacy Policy</a> | <a href="#"  style="text-decoration:none;color:#FFF">Terms of Use</a> | <a href="#"  style="text-decoration:none;color:#FFF">Site Map</a></div>
            <div class="copyrightdiv"><a>© 2014 DoIT Technology Institute & Solutions.</a></div>
         </div>
      </div>
      </div>

   </body>
</html>

CSS File

body{

    margin:0px;
    padding:0px;
    }
.contentarea{

    width:100%;
    height:auto;
    max-width:100%;

    }

.level{

    height:auto;

    }

.headerarea{

    height:120px;
    width:960px;
    margin:auto;


    }
.imgsliderarea{

    height:500px;
    width:920px;
    padding:20px;
    margin:auto;
    z-index: -10;

    }   
.courseimg{

    height:300px;
    width:920px;
    padding:20px;
    margin:auto;

}    
.summaryboxarea{

    width:960px;
    height:auto;
    margin:auto;

    }   
.summarybox{

    width:280px;
    min-height:200px;
    padding:20px;
    height:auto;
    float:left;

    }   
.newsarea{
    width:960px;
    height:auto;
    margin:auto;


    }   
.newsbox{
    width:600px;
    height:auto;
    float:left;
    padding:20px;


    }

.offerbox{
    width:280px;
    height:auto;
    float:left;
    padding:20px;
    }
.footerarea{

    width:960px;
    min-height:120px;
    height:auto;
    margin:auto;


    }   

.gradient{

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

    }   
.orangegradient{

    background: #feb71d; /* Old browsers */
background: -moz-linear-gradient(top,  #feb71d 0%, #eda60c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feb71d), color-stop(100%,#eda60c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feb71d 0%,#eda60c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feb71d 0%,#eda60c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feb71d 0%,#eda60c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feb71d 0%,#eda60c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb71d', endColorstr='#eda60c',GradientType=0 ); /* IE6-9 */



    }
.partnersarea{
    width:920px;
    padding:20px;
    margin:auto;
    height:auto;
    min-height:60px;

    }   
.shadowmkr{


-webkit-box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow:    1px 1px 20px 0px rgba(50, 50, 50, 0.36);
box-shadow:         1px 1px 20px 0px rgba(50, 50, 50, 0.36);
padding:20px;


    }   
.freecontent{

    width:100%;
    height:auto;
    padding-top:20px;
    float:left;

    }   
.clear{

    clear:both;
    }


/* Typography */

h2{

    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    color:#ffb108;

    }
.captiontext{
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    color:#ffb108;


    }   

.filltext{

    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#666;

    }   
p{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#333;

    }   
.footertext{

    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#FFF;

    }   
.borderline{

    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#ffb108;


    }   

/* Buttons */
.button-orange {
    -moz-box-shadow:inset 0px 1px 0px 0px #feb71d;
    -webkit-box-shadow:inset 0px 1px 0px 0px #feb71d;
    box-shadow:inset 0px 1px 0px 0px #feb71d;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #feb71d), color-stop(1, #eda60c) );
    background:-moz-linear-gradient( center top, #feb71d 5%, #eda60c 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb71d', endColorstr='#eda60c');
    background-color:#feb71d;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    display:inline-block;
    color:#ffffff;
    font-family:Verdana;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    padding-left:20px;
    padding-right:20px;
}
.button-orange:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f87a0a), color-stop(1, #f87a0a) );
    background:-moz-linear-gradient( center top, #f87a0a 5%, #f87a0a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f87a0a', endColorstr='#f87a0a');
    background-color:#f87a0a;
}.button-orange:active {
    position:relative;
    top:1px;
}


/*grids*/

.col4{

    width:32%;
    height:auto;
    float:left;
    padding:2%;


    }
.col8{

    width:58%;
    height:auto;
    float:left;
    padding:2%;
    padding-top:60px;

    }   

/*menu items*/

.navitem{

    height:25px;
    width:120px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#ffb108;
    float:left;
    padding-top:5px;

    }
.captionbar{

    width:100%;
    height:27px;
    padding-top:3px;
    float:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    color:#FFF;

    font-weight:bold;

    }   
.spacebar{

    width:100%;
    height:20px;
    float:left;
    }   
.navitem:hover{

    background-color:#ffb108;
    color:#FFF;
    cursor:pointer;

    }   .copyrightdiv {
    float: left;
    height: 40px;
    width: 100%;
    padding-left:1%;
    padding-top: 10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#FFF;
}
.termsdiv {
    float: left;
    height: 30px;
    width: 99%;
    padding-left:1%;
    padding-top: 30px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#FFF;

    border-bottom-color:#ffb921;
    border-bottom-width:1px;
    border-bottom-style:solid;
}

/*Navigation menu*/
#nav {
    padding-left:40px;

}
#nav_wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: left;

}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;

}
#nav ul li {
    display: inline-block;

}
#nav ul li:hover {
    background-color: #ffb108;


}

#nav ul li a{
    color: #ffb108;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-weight:bold;
    display: block;
    padding: 10px;
    text-decoration: none;

}

#nav ul li a:hover{

    color:#FFF;

    }


#nav ul li:hover ul {
    display: block;

}
#nav ul ul {
    display: none;
    position: absolute;
    background-color:  #ffb108;
    border-top: 0;
    margin-left: 0px;
}
#nav ul ul li {
    display: block;
    width:200px;

}
#nav ul ul li a{
    color: #FFF;
    font-weight:normal;

}
#nav ul li:hover a {
    color: #fff;

}
#nav ul ul li a:hover {
    color: #333;

}

/*Navigation Menu */

Please suggest me a solution.

Upvotes: 0

Views: 357

Answers (3)

amol
amol

Reputation: 1555

Try following css, no need to give negative z-index

.headerarea{
  position: relative;
  z-index: 90;
}

.imgsliderarea{
  position: relative;
  z-index: 80
}

Check this Demo

Upvotes: 3

Igwe Kalu
Igwe Kalu

Reputation: 14868

The dropdown is behind the slider because its z-index property is below that that of the slider.

Hence, to solve your problem, modify your CSS following one of the two directions below:

  • increase the z-index property of the dropdown to be higher than that of the slider, or
  • decrease the z-index property of the slider to be lower that that of the dropdown.

Upvotes: 1

Katstevens
Katstevens

Reputation: 1571

Z-index only works on elements that have position, so set the position of .imgsliderarea to relative (so it doesn't alter the flow of the DOM) and it will fix:

position: relative;

Upvotes: 1

Related Questions