Подменю CSS, влияющее на макет ⇐ Jquery

[Anonymous]

Я просто создавал меню для своего веб-сайта с помощью 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;
}

Код: Выделить всё

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

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

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

Подробнее здесь: https://stackoverflow.com/questions/454 ... the-layout