JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar2">
      <ul>
          <li class="list"><a class="link" href="<?php echo base_url() ?>index.php/A">A</a></li>
          <li class="list"><a class="link" href="">B</a></li>
          <li class="list"><a class="link" href="">C</a></li>
          <li class="list"><a class="link" href="">D</a></li>
          <li class="list"><a class="link" href="">Browse</a>
              <ul>
                  <li><a href="">By Category</a>
                      <ul>
                          <li><a href="">k</a></li>
                          <li><a href="">l</a></li>
                          <li><a href="">m</a></li>
                          <li><a href="">n</a></li>
                          <li><a href="">o</a></li>
                          <li><a href="">p</a></li>
                          <li><a href="">q</a></li>
                          <li><a href="">r</a></li>
                      </ul>
                  </li>
                  <li><a href="">By Uploader</a></li>
              </ul>
          </li>
          <li class="list"><a class="link" href="">E</a></li>
      </ul>
 </div>

CSS

a { color: gray; }
#navbar2 li:first-child a { color: black }
#navbar2 li li:first-child a { color: gray }


#navbar2 {}

/* Level 1 */
#navbar2 ul { padding: 5px;}
#navbar2 li {
    display: inline;
    position: relative;
    white-space: nowrap;
}

/* Level 2 */
#navbar2 ul ul {
    display: none;
    position: absolute;
    top: 15px;
    left: 0
}
#navbar2 li:hover ul { display: inline }
#navbar2 li:hover ul ul { display: none }
#navbar2 li li {
    float:left;
    clear: left;
}

/* Level 3 */

#navbar2 ul ul ul {
    display: none;
    width: 100px;
    background: #eee;
}
#navbar2 li li:hover ul {
    display: inline;
    left: 25px;
    z-index: 50;
}