JSFiddle - React, Tailwind, and code Playground

by Guilherme Santana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  
<div class="container">
                        
  <div class="dropdown">
    <button id='btndevices' class="btn" type="button" data-toggle="dropdown"><i class="fa fa-server"></i></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">ARMS8</a></li>
      <li><a tabindex="-1" href="#">QDI</a></li>
      <li><a tabindex="-1" href="#">Fabrica de herbicidas</a></li>
      <li><a tabindex="-1" href="#">Torres</a></li>
      <li><a tabindex="-1" href="#">Armazens e Laboratórios</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">Fabrica de inseticidas<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Inseticidas 1</a></li>
          <li><a tabindex="-1" href="#">Inseticidas 1</a></li>
          <li><a tabindex="-1" href="#">Inseticidas 3</a></li>
          <li><a tabindex="-1" href="#">Inseticidas 4</a></li>
          <li><a tabindex="-1" href="#">Inseticidas 5</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Fabrica de enxofre <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Enxofre 1</a></li>
              <li><a href="#">Enxofre 2</a></li>
              <li><a href="#">Enxofre 3</a></li>
              <li><a href="#">Enxofre 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a tabindex="-1" href="#">Fabrica de herbicidas</a></li>
      <li><a tabindex="-1" href="#">Torres</a></li>
      <li><a tabindex="-1" href="#">Armazens e...

CSS

#btndevices
{
  background: #d9edf7;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.dropdown ul
{
  max-height:150px; 
  overflow-y:auto;
  background: #d9edf7;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 3px;  
}

.dropdown ul li:hover > a {
  background: #0078d7;
  color: #fff;
}

.dropdown ul li {
  font: normal 12px/29px arial, sans-serif;
  color: black;
}

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

JavaScript

$(document).ready(function(){
  $('.dropdown-submenu a.submenu').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});