enter image description here enter image description here您好我已经创建了一个下拉菜单。我想在导航中注入它。当下拉菜单打开时，它会跳入导航并使高度更长。我不希望它发生我希望它在云上打开所以不要改变导航高度，我试图使用z-index但没有工作！ 下面找到我的代码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 >
<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>
答案 0 :(得分：0)
我做到了：我在第二个位置使用position：absolute，在包装器中使用position：relative .social。然后我改变了高度和宽度规则的定位。
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>
答案 1 :(得分：0)
尝试调整无序列表的定位和z-index及其宽度。
.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>
<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>