Question

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

$(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">
	<div class="background"></div>
	</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

Answer 1

您可以在子菜单上使用绝对位置，这样导航的高度就不会增加。

这应该有效：

.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">
	<div class="background"></div>
	</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>

Answer 2

为下面的菜单应用固定高度

private List<PlayerModel> players = new List<PlayerModel>();

根据

调整其他样式

Answer 3

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

此外，您需要使用left和top将元素与特定位置对齐。例如left: 50px; top: 0px;

Here is my example

css子菜单影响布局

3 个答案: