JSFiddle - React, Tailwind, and code Playground

by kustovskyi

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3">
    <title>Sidebar template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
 

</head>

<body>

        <div class="dropright">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span ></span>
            </a>
            <ul  class="dropdown-menu">
              <div id="menu">
  <ul>
    <li>
      <a>Подменю №1</a>
    </li>
    <li>
      <a>Подменю №2></a>
      <div id="submenu">
           <ul>
           <li>
           <a>Submenu action21</a>
           </li>
           <li>
           <a>Submenu action22</a>
           </li>
           <li>
           <a>Submenu action23</a>
           </li>
           <li>
           <a>Submenu action34</a>
           </li>
           <li>
           <a>Submenu action35</a>
           </li>
           <li>
           <a>Submenu action26</a>
           <ul>
           <li>
           <a>Submenu action27</a>
           </li>
           </ul>
           </li>
           </ul>
      </div>
    </li>
    <li>
      <a>Подменю №3></a>
       <div id="submenu">
           <ul>
           <li>
           <a>Submenu action31</a>
           </li>
           <li>
           <a>Submenu action32</a>
           </li>
           <li>
           <a>Submenu action33</a>
           </li>
           <li>
           <a>Submenu action34</a>
          ...

CSS

ul{
  list-style-type: none;
  padding:0;
  margin:0;
    overflow-y: auto;
    overflow-x: hidden;
  width:350px;
  height:350px;
  background:#aaa;

}
li{
 position:relative;
}
li>a{
  cursor:pointer;
}
#submenu{
  display:none;
  position:fixed;
  
}
#submenu>ul{
  position:absolute;
  top:-20px;
  left:120px;
}
#menu li:hover>#submenu{
  display:block;
}

.dropdown-submenu  {
    position: relative;

}
.dropdown-menu  {
   height:350px;
overflow-y:auto;
}


.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
   
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;

}
.dropdown-menu li:hover > ul{
 display: block;
}
.dropdown-submenu li > ul li ul{
 position: absolute;
 top: 0;
 
}