CSS submenu effecting the layout
05:37 02 Aug 2017

I was just creating a menu for my web site using CSS. In the code I have placed the menu items in an unordered list as usual and placed a submenu inside one of the menu options. Now the problem is, when the sub menu becomes visible, The layout height increases as to match the height of the sub menu. If explanation is confusing, please see below image.

After opening submenu

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

javascript html jquery css