Neg February 2016

dropdown menu does not cover the text underneath /z-index

enter image description hereenter image description hereHi I have created a drop down menu. I want to inject it in a navigation. when drop down menu opens it jumps in the navigation and makes the height longer. I don't want that it happens I want it opens on the cloud so don't change the navigation height, I tried to use z-index but did not work! below find my codes plz:

    .social{
    	height:50px;
    	text-align: center;
    	width:70pt;
    	cursor:pointer; 
    	position: absolute;
    	
    }
    
    .first{
    	padding-top:5px;
    	height: 25pt ;
    	color:white;
    	background:black;
    
    }
    
    
    .second{
    	z-index:5;
    	padding-top:5px;
    	height: 25pt ;
    	display:none;
    }
    
    .social:hover .first{
    	background:@gray-dark ;
    	.first-hover:hover{
    		color:@blue;
    	}
    }
    
    .social:hover .second {
    	background:white;
    	display:block;
    	color:grey;
    	.second-hover:hover{
    		color:@blue;
    
    	}
    }
 <div class="social">
       <div class="first">
         <ul class="Header-social list-inline right">
           <li >
             <a  href="https://www.facebook.com" target="_blank">
               <i class="icon icon-facebook first first-hover" ></i>
             </a>
           </li>
           <li >
             <a  href="https://twitter.com" target="_blank">
               <i class="icon icon-twitter first first-hover"></i>
             </a>
           </li>
           <li &g        

Answers


silviagreen February 2016

I did it: I used position:absolute in second and position:relative in its wrapper .social . Then I changed the positioning of the height and width rules.

body{ background: green; }

.social{
    	height:50px;
    	text-align: center;
    	width:70pt;
    	cursor:pointer; 
    	position:relative;
    	
    }
    
    .first{
    	padding-top:5px;
    	height: 25pt ;
    	color:white;
    	background:black;
    }
    
    
    .second{
     
      position: absolute;
      width: 100%;
    	z-index:10;
    display: none;
    	
      background: yellow;
      left: 0;
    }
    
    .second .list-inline{
      
    }
    
    .second .list-inline li{
      padding-top: 5px;
    }
    
     .social:hover .first{
    	background:@gray-dark ;
    	.first-hover:hover{
    		color:@blue;
    	}
    }
    
    .social:hover .second {
    	background:white;
    	display:block;
    	color:grey;
    	.second-hover:hover{
    		color:@blue;
    
    	}

      
     
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="social">
       <div class="first">
         <ul class="Header-social list-inline right">
           <li >
             <a  href="https://www.facebook.com" target="_blank">
               <i class="fa fa-facebook first first-hover" ></i>
             </a>
           </li>
           <li >
             <a  href="https://twitter.com" target="_blank">
               <i class="fa fa-twitter first first-hover"></i&g 


Peter Wilson February 2016

Try do adjust positioning and z-index of your unordered list and the width of it as well.

    .social{
    	height:50px;
    	text-align: center;
    	width:70pt;
    	cursor:pointer; 
    	position: absolute;
    	
    }
    
    .first{
    	padding-top:5px;
    	height: 25pt ;
    	color:white;
    	background:black;
    
    }
    
    .social:hover .second ul{
       display:block;
       width:100%;
       position: relative;
       z-index:1111;
       margin:0;
       padding:0;
    }
    .second{
    	z-index:5;
    	padding-top:5px;
    	height: 25pt ;
    	display:none;
    }
    
    .social:hover .first{
    	background:@gray-dark ;
    	.first-hover:hover{
    		color:@blue;
    	}
    }
    
    .social:hover .second {
    	background:white;
    	display:block;
    	color:grey;
    	.second-hover:hover{
    		color:@blue;
    
    	}
    }
 <div class="social">
       <div class="first">
         <ul class="Header-social list-inline right">
           <li >
             <a  href="https://www.facebook.com" target="_blank">
               <i class="icon icon-facebook first first-hover" ></i>
             </a>
           </li>
           <li >
             <a  href="https://twitter.com" target="_blank">
               <i class="icon icon-twitter first first-hover"></i>
             </a>
           </li>
           <li >
            <a href="https://www.instagram.com" target="_blank">
              <i class="icon icon-instagram first first-hover"></i>
            </a>
          </li>
        </ul>		
      </div>
    

Post Status

Asked in February 2016
Viewed 1,531 times
Voted 4
Answered 2 times

Search




Leave an answer