影响布局的css子菜单

问题描述：

您好，我刚刚使用CSS为我的网站创建了一个菜单。在代码中，我像往常一样将菜单项放在无序列表中，并在其中一个菜单选项中放置了一个子菜单。现在的问题是，当子菜单变得可见时，布局高度会增加以匹配子菜单的高度。如果解释混乱，请看下面的图片。谢谢。 After opening submenu 影响布局的css子菜单

$(document).ready(function(){ 
 
$("#services").click(function(){ 
 
$("#service").toggle(); 
 
}); 
 
});

body { 
 
padding : 0; 
 
margin : 0; 
 
} 
 
.layer { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.layer { position: absolute; } 
 
    
 
.background { 
 
    background: url("images/headerImage.jpg") no-repeat 50% 100%; 
 
    bottom: -20px; 
 
    background-size: cover; 
 
    position: fixed; 
 
    width: 110%; 
 
    left: -5%; 
 
    top: -5%; 
 
    z-index : -100; 
 
} 
 
.menuItems { 
 
position : absolute; 
 
width : 100%; 
 
padding : 0; 
 
margin : 0; 
 
background-color : black; 
 
height : auto; 
 
} 
 
.menuItems ul { 
 
list-style-type : none; 
 
float : right; 
 
margin-right : 2vw; 
 
padding : 0; 
 
margin : 0; 
 
} 
 
.menuItems ul li { 
 
display : inline-block; 
 
padding : 0; 
 
margin : 0; 
 
} 
 
.menuItems ul li a { 
 
color : white; 
 
text-decoration : none; 
 
display : block; 
 
padding : 1vw; 
 
margin : 0; 
 
} 
 
.menuItems ul li a:hover { 
 
background-color : green; 
 
text-decoration : none; 
 
} 
 
.menuItems ul li ul{ 
 
display : none; 
 
overflow : hidden; 
 
} 
 
.menuItems ul li ul li{ 
 
display : block; 
 
} 
 
.menuItems ul li ul li a{ 
 
display : block; 
 
padding : 0; 
 
margin : 0; 
 
z-index : 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<div class="layer"> 
 
\t <div class="background"></div> 
 
\t </div> 
 
</div> 
 
<div class = "menuItems"> 
 
<ul> 
 
<li><a href = "#">Home</a></li> 
 
<li><a href = "#">Why us</a></li> 
 
<li><a href = "#">Accomodation</a></li> 
 
<li><a href = "#">Conference Hall</a></li> 
 
<li><a href = "#" id = "services">Services</a> 
 
<ul id = "service"> 
 
<li><a href = "#">Restaurant and Bar</a></li> 
 
<li><a href = "#">Travel</a></li> 
 
<li><a href = "#">Beauty care</a></li> 
 
<li><a href = "#">Health club & gym</a></li> 
 
</ul> 
 
</li> 
 
<li><a href = "#">Facilities</a></li> 
 
<li><a href = "#">Virtual tour</a></li> 
 
<li><a href = "#">Contact Us</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

] 2

你的子菜单应定位绝对把它拿出来的公文流转。不要忘记让父母亲定位。 – Gerard

我想你想要一个黑色的下拉菜单？如果是这样的话，你应该将#service（子菜单）绝对定位到#services（这又需要相对位置）并相应地定位和设置子菜单的样式。 – adamk22

首先'li'需要'position：relative：'，sub'li'需要'position：absolute;' – Gezzasa

答

您可以使用子菜单上的绝对位置，以资产净值的高度不会增加。

这应该工作：

.menuItems ul li { 
    display : inline-block; 
    padding : 0; 
    margin : 0; 
    /* Set position relative to the parent */ 
    position: relative; 
} 

.menuItems ul li ul{ 
    display : none; 
    overflow : hidden; 
    /* Set position absolute to the child */ 
    position: absolute; 
    top: 100% 
    left: 0 
}

$(document).ready(function(){ 
 
$("#services").click(function(){ 
 
$("#service").toggle(); 
 
}); 
 
});

body { 
 
padding : 0; 
 
margin : 0; 
 
} 
 
.layer { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.layer { position: absolute; } 
 
    
 
.background { 
 
    background: url("images/headerImage.jpg") no-repeat 50% 100%; 
 
    bottom: -20px; 
 
    background-size: cover; 
 
    position: fixed; 
 
    width: 110%; 
 
    left: -5%; 
 
    top: -5%; 
 
    z-index : -100; 
 
} 
 
.menuItems { 
 
position : absolute; 
 
width : 100%; 
 
padding : 0; 
 
margin : 0; 
 
background-color : black; 
 
height : auto; 
 
} 
 
.menuItems ul { 
 
list-style-type : none; 
 
float : right; 
 
margin-right : 2vw; 
 
padding : 0; 
 
margin : 0; 
 
} 
 
.menuItems ul li { 
 
display : inline-block; 
 
padding : 0; 
 
margin : 0; 
 
position: relative; 
 
} 
 
.menuItems ul li a { 
 
color : white; 
 
text-decoration : none; 
 
display : block; 
 
padding : 1vw; 
 
margin : 0; 
 
} 
 
.menuItems ul li a:hover { 
 
background-color : green; 
 
text-decoration : none; 
 
} 
 
.menuItems ul li ul{ 
 
display : none; 
 
overflow : hidden; 
 
position: absolute; 
 
left: 0; 
 
top: 100%; 
 
} 
 
.menuItems ul li ul li{ 
 
display : block; 
 
} 
 
.menuItems ul li ul li a{ 
 
display : block; 
 
padding : 0; 
 
margin : 0; 
 
z-index : 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<div class="layer"> 
 
\t <div class="background"></div> 
 
\t </div> 
 
</div> 
 
<div class = "menuItems"> 
 
<ul> 
 
<li><a href = "#">Home</a></li> 
 
<li><a href = "#">Why us</a></li> 
 
<li><a href = "#">Accomodation</a></li> 
 
<li><a href = "#">Conference Hall</a></li> 
 
<li><a href = "#" id = "services">Services</a> 
 
<ul id = "service"> 
 
<li><a href = "#">Restaurant and Bar</a></li> 
 
<li><a href = "#">Travel</a></li> 
 
<li><a href = "#">Beauty care</a></li> 
 
<li><a href = "#">Health club & gym</a></li> 
 
</ul> 
 
</li> 
 
<li><a href = "#">Facilities</a></li> 
 
<li><a href = "#">Virtual tour</a></li> 
 
<li><a href = "#">Contact Us</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

答

申请一个固定的高度菜单像下面

.menuItems { 
position : absolute; 
width : 100%; 
padding : 0; 
margin : 0; 
background-color : black; 
height : 40px; 
}

，并调整其它款式可根据该

答

对于不影响菜单的子菜单，我们通常使用position: absolute;来移动图层外的元素。它可能会使元素与其他元素在同一个地方。为此，我们将使用z-index: 99（99可能是比其他元素大的其他数字。）

另外，您需要使用左侧和顶部将元素与特定位置对齐。 e.g left: 50px; top: 0px;

Here is my example

影响布局的css子菜单

相关推荐