JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-%d0%b3%d0%bb%d0%b0%d0%b2%d0%bd%d0%be%d0%b5-%d0%bc%d0%b5%d0%bd%d1%8e" class="header-menu header-menu-main"><li id="menu-item-177" class="menu-item menu-item-type-post_type_archive menu-item-object-doors menu-item-177"><a href="/doors/">Каталог</a></li>
              <li id="menu-item-180" class="menu-item menu-item-type-post_type_archive menu-item-object-decorations current-menu-item menu-item-has-children menu-item-180"><a href="/decorations/">Отделки</a>
                <ul class="sub-menu">
                  <li id="menu-item-174" class="menu-item menu-item-type-taxonomy menu-item-object-category_decoration menu-item-174"><a href="/category_decoration/decoration-patinated/">МДФ патинированный</a></li>
                  <li id="menu-item-173" class="menu-item menu-item-type-taxonomy menu-item-object-category_decoration menu-item-173"><a href="/category_decoration/decoration-laminated/">МДФ ламинированный (ПВХ)</a></li>
                  <li id="menu-item-175" class="menu-item menu-item-type-taxonomy menu-item-object-category_decoration menu-item-175"><a href="/category_decoration/decoration-veneered/">МДФ шпонированный</a></li>
                  <li id="menu-item-172" class="menu-item menu-item-type-taxonomy menu-item-object-category_decoration menu-item-172"><a href="/category_decoration/decoration-colored/">МДФ крашеный (RAL)</a></li>
              
                </ul>
              </li>
              <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101"><a href="#">Производство</a></li>
              <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102">       </ul>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto natus similique, tenetur exercitationem facere ad harum nostrum, tempora suscipit soluta dolor, sit iure eligendi, quis ipsa beatae. Corporis, velit itaque excepturi dolor, esse qui aut quae iste, fugit ipsa odio!...

SCSS

ul {
  list-style: none;
  padding: 0;
}

.header-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  
  width: 100%;
  height: auto;
  
  background-color: #333;
  text-align: left;
  max-height: none;
  
  a {
    display: block;
    padding: 15px;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    
    &:hover {
      color: white;
    }
  }
}


.header-menu-main > li {
  position: relative;

}

.sub-menu {
  position: absolute;
  white-space: nowrap;
  left: 0;
  background: linear-gradient(#142b38, #3b5769);
  display: none;
  
}

li:hover .sub-menu {
    display: block;
  }

/* 
  

 */