CSS-Untermenü, das das Layout beeinflusst ⇐ HTML

[Anonymous]

Ich habe gerade ein Menü für meine Website mit CSS erstellt. Im Code habe ich die Menüpunkte wie üblich in einer ungeordneten Liste platziert und ein Untermenü innerhalb einer der Menüoptionen platziert. Das Problem besteht nun darin, dass, wenn das Untermenü sichtbar wird, die Layouthöhe entsprechend der Höhe des Untermenüs zunimmt. Wenn die Erklärung verwirrend ist, sehen Sie sich bitte das Bild unten an.

Code: Select all

$(document).ready(function(){
$("#services").click(function(){
$("#service").toggle();
});
});

Code: Select all

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;
}

Code: Select all

[list]
[*]Home
[*]Why us
[*]Accomodation
[*]Conference Hall
[*]Services

Restaurant and Bar
[*]Travel
[*]Beauty care
[*]Health club & gym
[/list]

[*]Facilities
[*]Virtual tour
[*]Contact Us