0
您好，我刚刚使用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