html - 下拉菜单不覆盖下面的文本/z-index

Question

enter image description here enter image description here您好，我创建了一个下拉菜单。我想在导航中注入(inject)它。当下拉菜单打开时，它会在导航中跳转并使高度变长。我不希望它发生我希望它在云端打开所以不要更改导航高度，我尝试使用 z-index 但没有用!请在下面找到我的代码:

    .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 >
            <a href="https://www.instagram.com" target="_blank">
              <i class="icon icon-instagram first first-hover"></i>
            </a>
          </li>
        </ul>		
      </div>
      <div class="second">
         <ul class="Header-social list-inline right">
           <li >
             <a  href="https://www.youtube.com" target="_blank">
               <i class="icon icon-youtube second second-hover"></i>
             </a>
           </li>
           <li >
             <a  href="https://twitter.com" target="_blank">
               <i class=" icon icon-twitter second second-hover"></i>
             </a>
           </li>
           <li >
            <a href="https://www.instagram.com" target="_blank">
              <i class="icon icon-pintrest second second-hover"></i>
            </a>
          </li>
        </ul>		
      </div>
    
      <div>
        dsfsdfdsfsdf
      </div>
    </div>

Answer 1

我做到了:我在第二个位置使用了 position:absolute，在其包装器 .social 中使用了 position:relative。然后我改变了高度和宽度规则的定位。

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>
             </a>
           </li>
           <li >
            <a href="https://www.instagram.com" target="_blank">
              <i class="fa fa-instagram first first-hover"></i>
            </a>
          </li>
        </ul>		
      </div>
      <div class="second">
         <ul class="Header-social list-inline right">
           <li >
             <a  href="https://www.youtube.com" target="_blank">
               <i class="fa fa-youtube  second-hover"></i>
             </a>
           </li>
           <li >
             <a  href="https://twitter.com" target="_blank">
               <i class="fa fa-twitter  second-hover"></i>
             </a>
           </li>
           <li >
            <a href="https://www.instagram.com" target="_blank">
              <i class="fa fa-pinterest  second-hover"></i>
            </a>
          </li>
        </ul>		
      </div>
    
      <div>
        dsfsdfdsfsdf
      </div>
    </div>