Menu effects

Hi, hi make some menu effect with this css:

#header-menu ul.menu li {
	border-bottom: thick solid #31246e;/*253f80*/
}
#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus {
	background: #253f80;
}

#header-menu ul.menu li:hover {
	border-bottom: thick solid #00a5e9;
}

#header-menu {
	border-top: 2px solid #fff;
	/*background: #31246e;*/
        box-shadow: 10px 10px 5px #dedede;
}

@media screen and (min-width: 961px) {
    #content {
        border-right: 2px solid #D8D8D8;
        padding-right: 13px;
    }
}

@font-face {
    font-family: "Abel";
    font-style: normal;
    font-weight: 400;
    src: local("Abel"), local("Abel-Regular"), url("https://fonts.gstatic.com/s/abel/v6/_c5D7Wxu-NSk4vT8jUYrkQ.woff") format("woff");
}
  
#header-menu ul.menu a {
    font-family: Abel;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 2em;
}

Now the problem is that the submenu doesn't work and the bottom line changhe the heigth of the menu. How can I fix this?