影响布局的 CSS 子菜单

你好，我只是使用 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">
	<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>

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

这应该有效：

.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>

为菜单应用固定高度，如下所示

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

并据此调整其他样式

为了使子菜单不影响菜单，我们通常使用position: absolute;将元素移动到图层之外。它可以使一个元素可以与其他元素位于同一位置。为此，我们将使用z-index: 99(99 可以是大于另一个元素的其他数字。

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

这是我的例子

相关内容

最新更新

热门标签：