Выпадающее меню исчезает при наведении

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 
body, html { 
    height: 100% 
} 
 
    
.wrapper { 
    background-color: #dadad5 
} 
 
.content { 
    -webkit-box-flex: 1; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto 
} 
 
.container { 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 300px 
} 
 
 
.header { 
    width: 90%; 
    margin: 0 auto 
} 
 
.header-nav { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center 
} 
 
.header-nav__reserve { 
    margin-left: auto 
} 
 
.header-nav__menu { 
    margin: auto 
} 
 
.logo { 
    margin-right: 40px 
} 
 
.logo__img { 
    width: 140px; 
    height: auto 
} 
 
.menu__list { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center 
} 
 
.menu__item { 
    padding: 40px; 
    cursor: pointer; 
    -webkit-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out; 
    transition: all .5s ease-out 
} 
 
.menu__item:hover .sub-menu { 
    bottom: -60px 
} 
 
.menu__item:hover .sub-menu__item { 
    -webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg) 
} 
 
.menu__link { 
    font-family: 'Open Sans', Tahoma, sans-serif; 
    font-size: 14px; 
    padding: 5px 0; 
    -webkit-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
    letter-spacing: 1.2px; 
    text-transform: uppercase; 
    color: #000; 
    border-top: 1px solid transparent; 
    border-bottom: 1px solid transparent 
} 
 
.menu__link:hover { 
    color: #d3a352; 
    border-top: 1px solid #d3a352; 
    border-bottom: 1px solid #d3a352 
} 
 
.lang__list { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center 
} 
 
.lang__link { 
    font-size: 14px; 
    font-weight: 300; 
    position: relative; 
    display: block; 
    height: 14px; 
    padding: 0 10px; 
    -webkit-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
    color: #000 
} 
 
.lang__link:after { 
    position: absolute; 
    bottom: -5px; 
    left: 50%; 
    display: block; 
    width: 20px; 
    height: 1px; 
    content: ''; 
    -webkit-transition: background-color .5s ease; 
    -o-transition: background-color .5s ease; 
    transition: background-color .5s ease; 
    -webkit-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    transform: translateX(-50%); 
    background-color: transparent 
} 
 
.lang__link:hover { 
    color: #d3a352 
} 
 
.lang__link:hover:after { 
    background-color: #d3a352 
} 
 
.lang__item:not(:last-child) { 
    border-right: 1px solid #000 
} 
 
.lang-active { 
    font-weight: 400; 
    color: #d3a352 
} 
 
.reserve__link, .sub-menu { 
    -webkit-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out; 
    transition: all .5s ease-out 
} 
 
.reserve__link { 
    font-weight: 100; 
    padding: 6px 12px; 
    cursor: pointer; 
    letter-spacing: 1.2px; 
    text-transform: uppercase; 
    color: #000; 
    border: 1px solid #000; 
    border-radius: 3px; 
    background-color: transparent 
} 
 
.reserve__link:hover { 
    color: #fcfcf6; 
    border: 1px solid #d3a352; 
    background-color: #d3a352 
} 
 
.sub-menu { 
    position: absolute; 
    z-index: -1; 
    bottom: 20px; 
    left: 0; 
    width: 100%; 
    height: 60px; 
    background-color: rgba(0, 0, 0, .7); 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, .15) 
} 
 
.sub-menu__list { 
    line-height: 60px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    text-transform: uppercase; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center 
} 
 
.sub-menu__item, .sub-menu__link { 
    -webkit-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out; 
    transition: all .5s ease-out 
} 
 
.sub-menu__item { 
    font-weight: 100; 
    padding: 0 20px; 
    -webkit-transform: rotateY(90deg); 
    transform: rotateY(90deg); 
    letter-spacing: 1.2px 
} 
 
.sub-menu__link { 
    font-size: 14px; 
    color: #fff 
} 
 
.sub-menu__link:hover { 
    color: #d3a352 
}

<body class="index-page"> 
    <div class="wrapper"> 
      <header class="header"> 
        <div class="header-nav"> 
          <div class="header-nav__logo"> 
            <div class="logo"><a class="logo__link" href="#"><img class="logo__img" src="static/images/content/logo.png"></a></div> 
          </div> 
          <div class="header-nav__lang"> 
            <div class="lang"> 
              <div class="lang__list"> 
                <div class="lang__item"><a class="lang__link lang-active" href="#"> RU</a></div> 
                <div class="lang__item"><a class="lang__link" href="#">EN</a></div> 
                <div class="lang__item"><a class="lang__link" href="#">CN</a></div> 
              </div> 
            </div> 
          </div> 
          <div class="header-nav__menu"> 
            <nav class="menu"> 
              <div class="menu__list"> 
                <div class="menu__item"><a class="menu__link" href="#">О нас</a> 
                  <div class="sub-menu"> 
                    <div class="sub-menu__list"> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">О ресторане</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">СМИ о нас</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">Виртуальный тур</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">Отзывы</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">Скидочная карта</a></div> 
                    </div> 
                  </div> 
                </div> 
                <div class="menu__item"><a class="menu__link" href="#">События</a> 
                  <div class="sub-menu"> 
                    <div class="sub-menu__list"> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">мероприятия</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">спецпредложения</a></div> 
                    </div> 
                  </div> 
                </div> 
                <div class="menu__item"><a class="menu__link" href="#">Галерея</a> 
                  <div class="sub-menu"> 
                    <div class="sub-menu__list"> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">интерьер</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">блюда</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">бар</a></div> 
                    </div> 
                  </div> 
                </div> 
                <div class="menu__item"><a class="menu__link" href="#">Меню</a> 
                  <div class="sub-menu"> 
                    <div class="sub-menu__list"> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">европа</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">индия</a></div> 
                      <div class="sub-menu__item"><a class="sub-menu__link" href="#">бар</a></div> 
                    </div> 
                  </div> 
                </div> 
                <div class="menu__item"><a class="menu__link" href="#">Банкеты</a></div> 
                <div class="menu__item"><a class="menu__link" href="#">Контакты</a></div> 
              </div> 
            </nav> 
          </div> 
          <div class="header-nav__reserve"> 
            <div class="reserve"><a class="reserve__link" href="#">Зарезервировать</a></div> 
          </div> 
        </div> 
      </header>