0
こんにちは私はちょうどCSSを使用して自分のウェブサイトのメニューを作成していました。コードでは、メニューアイテムを通常の順序で並べ替え、メニューオプションの1つにサブメニューを配置しました。今問題は、サブメニューが表示されると、サブメニューの高さに合わせてレイアウトの高さが上がります。説明が分かりにくい場合は、下の画像をご覧ください。ありがとうございました。 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：'である必要があり、 'li'は 'position：absolute;'である必要があります。 – Gezzasa