JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li><a href="#">Блог</a></li>
  <li><a href="#">Портфолио</a></li>
  <li data-dropdown='{"event":"click","animate":"fade"}'>
    <a href="#">Родительная страница &#8595;</a>
    <ul>
      <li><a href="#">Дочерняя страница 1</a></li>
      <li><a href="#">Дочерняя страница 2</a></li>
      <li data-dropdown='{"event":"hover"}'>
        <a href="#">Дочерняя страница 3 &#8594;</a>
        <ul>
          <li><a href="#">Дочерняя страница 1</a></li>
          <li><a href="#">Дочерняя страница 2</a></li>
        </ul>
      </li>
      <li><a href="#">Дочерняя страница 4</a></li>
    </ul>
  </li>
  <li data-dropdown='{"event":"click","menu_element":"div","animate":"none"}'>
    <a href="#">Поиск &#8595;</a>
    <div class="search">
      <input type="text" placeholder="Что ищем?" class="search-input" />
      <button class="search-button">&#128270;</button>
    </div>
  </li>
</ul>

SCSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

.menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #42A5F5;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.125);
  li {
    position: relative;
    a {
      display: block;
      padding: 10px 15px;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s linear;
      &:hover {
        background: #1E88E5;
      }
    }
    &.open > a {
      background: #1E88E5;
    }
  }
}
.dropdown {
  > .dropdown-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.125);
    background: #fff;
    a {
      color: #0D47A1;
      border-left: 0.3rem solid transparent;
      &:hover {
        background: #EEEEEE;
        border-color: #1E88E5;
      }
    }
    .open > a {
      background: #EEEEEE;
      border-color: #1E88E5;
    }
  }
  .dropdown > .dropdown-menu {
    top: 0;
    left: 100%;
  }
}
.search {
  background: #fff;
  padding: 10px!important;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.125);
  .search-input {
    flex: 0 0 80%;
    padding: 5px 10px;
    border: 1px solid #ccc;
    outline: none;
    &:focus {
      border-color: #42A5F5;
      z-index: 500;
    }
  }
  .search-button {
    flex: 0 0 20%;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #fff;
    transition: all 0.3s linear;
    margin-left: -1px;
    cursor: pointer;
    &:hover {
      background: #ddd;
    }
  }
}
.open > .search {
  display: flex!important;
}

JavaScript

/* ------------------------------------------------------------------

 Плагин выпалывающего меню .DropDown()

 Опции:
   button_element: 'a',             Ссылка на кнопку для открытия меню
   menu_element: 'ul',              Ссылка на дочернее меню
   event: 'hover',                  Событие для открытия меню hover или click
   animate: 'slide',                Название анимации none, fade или slide
   animate_duraction: 500,          Скорость анимации в миллисекундах
   open_class: 'open',              Класс для открытого меню
   wrap_class: 'dropdown',          Класс обёртки меню
   button_class: 'dropdown-button', Класс кнопки меню
   menu_class: 'dropdown-menu'      Класс по меню

 События:
   render.dropdown                  Визуализация, добавление нужных стилей, классов
   open.dropdown                    Открытие меню
   close.dropdown                   Закрытие меню

 Методы:
   init                             Вызывается по умолчанию, инициализирует плагин
   update                           Обновляет настройки плагина
   destroy                          Удаляет работу плагина

 Пример:
   HTML:
     <div class="menu">
       <a href="#">Открыть</a>
       <ul>
         <li><a href="#">Пункт 1</a></li>
         <li><a href="#">Пункт 2</a></li>
         <li><a href="#">Пункт 3</a></li>
       </ul>
     </div>

   JS:
     $(".menu").DropDown();

 P.S. Это меню изначально придумано для WordPress, но подойдёт практически для
 чего угодно так как оно требует минимальной вёрстки, и очень хорошо настраивается.

 ------------------------------------------------------------------ */

;(function ($) {
    "use strict";

    $.fn.DropDown = function(method, options) {
        var defaults, methods;

        // Если не указаны пользовательские настройки
        if(options === undefined) {
            options = {};
            // Если пользователь не указал метод но указал свои настройки
            if(typeof method === 'object') {
                options =...