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