JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rub">
    <ul>
      <li><a href="/selected-section/">Selected section</a>
        <ul>
          <li><a href="/other-section/">Other section</a></li>
          <li><a href="/other-section/">Other section</a></li>
          <li><a href="/other-section/">Other section</a></li>
        </ul>
      </li>
    </ul>
    </div>
    <>
    <div class="rub">
    <ul>
      <li><a href="/selected-cat/">Selected category</a>
        <ul>
          <li><a href="/other-cat/">Other cat</a></li>
          <li><a href="/other-cat/">Other cat</a></li>
          <li><a href="/other-cat/">Other cat</a></li>
          <li><a href="/other-cat/">Other cat</a></li>
        </ul>
      </li>
    </ul>
    </div>

CSS

h1, h2 {font-size:12px;margin:0;padding:0;}
.rub {display:inline-block;background:#EDEDED;border:1px solid #CCC;}
.rub ul, .rub li {list-style-type:none;margin:0;padding:0;font-size:12px;}
.rub li {display:inline-block;margin:0px;} 
.rub li a {display:block;padding:10px;margin:0;color:#555;text-decoration:none;} 
.rub li a:hover {background:#999;color:#FFF;}
.rub ul li a.active {background:#555;color:#FFF;}
.rub ul li ul {display:none;position:absolute;background:#EDEDED;z-index:1000;border:1px solid #CCC;}
.rub ul li:hover ul {display:block;}
.rub ul li ul li {display:block;}
.rub ul li ul li a {padding:2px 10px 2px 10px;white-space:nowrap;}