JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div id="sidebar-wrapper" style="margin-top: 51px;">
  <div id="MainMenu">
    <div id="MainMenu1">
    
      <div class="list-group">
        <a id="da2" href="#demo1" class="list-group-item">
          <span >Veggies </span>
        </a>
        <div id="demo1" class="list-group-submenu" style="">
          <a href="#" class="list-group-item">
            <span >Broccoli</span>
          </a>
          <a href="#" class="list-group-item">
            <span >Spinach</span>
          </a>
          <a href="#" class="list-group-item">
            <span >Green Beans</span>
          </a>
        </div>
        <a id="da3" href="#demo2" class="list-group-item">
          <span >Fruits </span>
         </a>
        <div id="demo2" class="list-group-submenu">
          <a href="#" class="list-group-item">
          <span >Mango </span>
          </a>
          <a href="#" class="list-group-item">
          <span >Cherry </span>
          </a>
        </div>
      </div>
      
    </div>
  </div>
</div>

CSS

.list-group {
  display: inline-block;
}

.list-group-submenu {
  display: none;
 }

.list-group-submenu a.list-group-item {
  color: #141C35;
  background-color: #557c83;
}

.list-group-submenu:hover,
[id^=da]:hover + .list-group-submenu {
  display: block;
}

a.list-group-item:hover {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #008080;
}