Menus not properly behave

Question

I have a menu with sub-menus, but when I hover the parent menu, it's not properly behaving (the parent menu is moving when I hover to the other parent menu). How to fixed this?

Here's the link.

CSS:

#site-navigation .menu {
  float: left;
}

.logo-center #site-navigation .menu {
  display: inline-block;
  float: none;
}

#site-navigation ul li {
  position: relative;
}

#site-navigation .menu>ul>li {
  float: left;
}

#site-navigation .menu>ul>li>a {
  color: #d31716;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 0 10px;
  text-transform: initial;
  letter-spacing: 1px;
  font-family: 'Open Sans', sans-serif;
  margin-top: 19px;
  text-decoration: none;
}

.logo-center #site-navigation .menu>ul>li>a {
  line-height: 20px;
}

.logo-center #site-navigation .menu>ul>li>a {
  border-left: none;
}


/*-Main Menu-*/

#site-navigation .menu>ul>li:hover>a:before,
#site-navigation .menu>ul>li.current_page_item>a:before,
#site-navigation .menu>ul>li.current-menu-item>a:before,
#site-navigation .menu>ul>li.current_page_ancestor>a:before,
#site-navigation .menu>ul>li.current-menu-ancestor>a:before {
  text-decoration: none;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: -5px;
  width: 100%;
}

.logo-center #site-navigation .menu>ul>li:hover>a:before,
.logo-center #site-navigation .menu>ul>li.current_page_item>a:before,
.logo-center #site-navigation .menu>ul>li.current_page_ancestor>a:before,
.logo-center #site-navigation .menu>ul>li.current-menu-ancestor>a:before {
  display: none;
}

#site-navigation .menu ul ul {
  background: none repeat scroll 0 0 #FFF;
  border-bottom: 2px solid #d31716;
  border-top: 2px solid #d31716;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  position: absolute;
  top: 100%;
  transition: all 0.3s ease-in-out 0s;
  z-index: 99999;
  font-family: 'Open Sans Bold', sans-serif;
}

#site-navigation .menu li:hover>ul {
  display: block;
}

#site-navigation .menu ul ul li {
  border-bottom: 2px solid #DDD;
  display: block;
  font-size: 13px;
  line-height: 20px;
  margin: 0 !important;
  text-align: left;
}

#site-navigation .menu ul ul li:last-child {
  border-bottom: none;
}

#site-navigation .menu ul ul li a {
  color: #666;
  display: block;
  font-weight: 300;
  min-width: 140px;
  padding: 10px 15px;
  position: relative;
  text-decoration: none;
}

#site-navigation .menu ul ul li>a:hover:before,
#site-navigation .menu ul ul li.current_page_item>a:before {
  background: #F0563D;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: -2px;
  width: 100%;
}

#site-navigation .menu ul ul li>a:hover,
#site-navigation .menu ul ul li.current_page_item>a {
  color: #d31716;
}

#site-navigation .menu ul ul ul {
  top: -2px;
  right: 100%;
  left: auto;
}


/*-With Sub pages-*/

#site-navigation .menu>ul>li.menu-item-has-children>a:before {
  color: #FFF;
  content: '\f107';
  font-family: FontAwesome;
  font-size: 10px;
  vertical-align: 1px;
}

#site-navigation .menu>ul>li.menu-item-has-children>a::after {
  content: '\f107';
  font-family: FontAwesome;
  font-size: 14px;
  margin-left: 7px;
  vertical-align: 1px;
}

#site-navigation .menu>ul>li>ul>li.menu-item-has-children>a::after {
  color: rgb(34, 34, 34);
  content: '\f105';
  font-family: FontAwesome;
  font-size: 10px;
  vertical-align: 1px;
  float: right;
}

Answer 1

Remove this CSS

#site-navigation .menu > ul > li:hover > a::before, #site-navigation .menu > ul > li.current_page_item > a::before, #site-navigation .menu > ul > li.current-menu-item > a::before, #site-navigation .menu > ul > li.current_page_ancestor > a::before, #site-navigation .menu > ul > li.current-menu-ancestor > a::before{ content: "";
height: 5px;
left: 0;
position: absolute;
text-decoration: none;
top: -5px;
width: 100%;}