JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class='acp_dd_menu' data-uk-dropdown='{justify:'Corps'}'>
    <ul>
<li class='acp_dd_menu_hdr'>Structure</li>
            <li><a href='http://www.webcadets.org/dev_index.php/admin_cp/unit_divisions/'>Divisions</a></li>
<li class='acp_dd_menu_hdr'>Positions</li>
            <li><a href='http://www.webcadets.org/dev_index.php/admin_cp/position_manager/'>Manage Positions</a></li>
            <li><a href='http://www.webcadets.org/dev_index.php/admin_cp/position_holders/'>Position Holders</a></li>
   </ul>
</div>
<li id='System'>System</li>
   <div class='acp_dd_menu' data-uk-dropdown='{justify:'System'}'>
    <ul>
            <li><a href='http://www.webcadets.org/dev_index.php/admin_cp/page_manager/'>Page Manager</a></li>
   </ul>
</div>

CSS

.acp_dd_menu {
    background-color: #FFF;
    color: #000;
    padding: 0;
    width: 200px;
    height: auto;
    line-height: auto;
    /*min-height: 30px;*/
    overflow: hidden;
  }

  .acp_dd_menu a {
    text-decoration: none;
  }

  .acp_dd_menu ul {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
    overflow: hidden;
    width: 200px;
  }


  .acp_dd_menu li {
    display: block;
    text-align: left;
    /* height: 30px; */
    padding: 0;
    border: 0;
    margin: 0;
    padding-left: 5px;
    cursor: pointer;
    overflow: hidden;
    width: 200px;
  }

  .acp_dd_menu li:hover, .acp_dd_menu_item_hovered {
    background-color: #bbc4e8;
    color: #000;
    width: 200px;
  }

  .acp_dd_menu_hdr li {
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: underline;
      cursor: auto;
      margin-top: 5px;
  }

  .acp_dd_menu_hdr li:hover{
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: underline;
      cursor: auto;
      margin-top: 5px;
  }