JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="nav">
      <ul id="menu">
        <li class="mat">
          <a href="#"><span>Мат. вычисления</span></a>
          <ul class="mat">
            <li id="mat-1">Степень</li>
            <li id="mat-2">Факториал</li>
          </ul>
        </li>
        <li class="pl">
          <a href="#"><span>Площадь</span></a>
          <ul>
            <li id="pl-1">Треугольник</li>
            <li id="pl-2">Квадрат</li>
            <li id="pl-3">Прямоугольник</li>
            <li id="pl-4">Эллипс</li>
            <li id="pl-5">Ромб</li> 
          </ul>
        </li>
        <li class="ob">
          <a href="#"><span>Объем</span></a>
          <ul>
            <li id="ob-1">Куб</li>
            <li id="ob-2">Конус</li> 
            <li id="ob-3">Пирамида</li>
            <li id="ob-4">Параллелепипед</li>
            <li id="ob-5">Цилиндр</li>
          </ul>
        </li>                

      </ul>
    </div>
  </div>

CSS

a { text-decoration: none; font-weight: bold; }
  #main { 
      width: 602px;
      height: 300px; 
      border: 1px solid #E0EBEB ;
      position: absolute; 
      top: 50%; 
      left: 50%;      
      margin: -150px 0 0 -301px;      
      background: #60a839;}
  #menu { 
      padding: 0; 
      margin: 0; 
      font-family: Georgia; 
  }
  #menu li {
    float: left;
    padding: 0;
    width: 200px;
    position: relative;
    transition:background 0.2s ease;
    border: 1px solid #333;
    border-left: none;
    border-right: none;
  }
  #menu li:hover{
    background: #B9D0D0
  }
  #menu li ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      display: none;
      position: absolute;
      left: 0;
      top: 31px;
      background: #E0EBEB;
    }

  #menu li ul li:hover{
   background: #B9D0D0;
   cursor: pointer;
  }

    #menu li ul li {
    height: 26px;
    margin: 0;
    text-align: left;
    border: 0;
  }

  #nav { 
      position: relative; 
      width: 100%; 
      float: left; 
      background: #E0EBEB;
  }
  
  #nav li { 
      list-style: none; 
      text-align: center; 
  }
  #nav li a { 
      display: block; 
      padding: 0; 
      border-left: none; 
      border-right: none; 
      line-height: 30px; 
      font-size: 19px; 
      font-family: Trebuchet MS; 
      color: #000; 
  }

JavaScript

$(".mat").click(function(event){
    $("#menu .mat ul").slideDown();
    event.stopPropagation();
});
$(".pl").click(function(event){
    $("#menu .pl ul").slideDown();
    event.stopPropagation();
});
$(".ob").click(function(event){
    $("#menu .ob ul").slideDown();
    event.stopPropagation();
});

$(document).mouseup(function (e){ 
    var btn = $("#menu ul"),
    div = $(".mat ul");
    div1 = $(".pl ul"); 
    div2 = $(".ob ul");
    if (!btn.is(e.target) ) {
      div.slideUp();
      div1.slideUp(); 
      div2.slideUp();  
    }
});