JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu" >
    <li class="kolonki" style="position:relative; top: -4px;padding:13px;padding-left:29px;padding-right:29px;"><b>ГЛАВНАЯ</b></li>
    <li class="kolonki" style="position:relative; top: 1px;padding-top:25px;padding-bottom:25px ;padding-left:22px;padding-right:22px; background: blue"><b>ПОДОБРАТЬ</br>
    ПЕРСОНАЛ</b>
      <ul id="menu1" >
        <li>Wwwwwww|</li>
        <li>Owwwwww|</li>
        <li>Rwwwwww|</li>
        <li>LDwwwww</li>
      </ul>
    </li>
    <li class="kolonki"><a class="kolonki">dd!!!!</a></li>
    <li>&nbsp; &nbsp; &nbsp;<a class="kolonki">www</a></li>
  </ul>

CSS

ul#menu {
width: 923px;
max-height:39px;
 background-color: #804a0b;
 background:#fff url(imgs/menut.png);
 background-image: linear-gradient(#cc9a55, #804a0b);
 border-radius: 3px;
 box-shadow: 0 1px 1px #777;
 text-transform: uppercase;
 font:12px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
 color:white;
padding:0;
}

ul#menu1{
 background-color: #fdf4e3;
 /*border-radius: 6px;*/
 box-shadow: 0 1px 1px #777;
 text-transform: uppercase;
 font:16px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

li.kolonki:hover{
	background: #fff9e0;
	background-image: linear-gradient(#f7d683, #e8c478);
}
ul#menu1 li:hover{
	background: #f7d683;
}

ul#menu li{
	position: relative;
	list-style-type: none;
	display:inline-block;
}
ul#menu1{
 position: absolute;
 left: -9999px;
}
ul#menu li.kolonki:hover ul#menu1 {
 display: block;
 left:0;
 }