JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  
<div id="navigation">
<li class="button">
<a href="#" id="open_menu">Выдвижное меню</a>
<ul class="dropdown" id="dropdown_menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Список доменов</a></li>
<li><a href="#">Добавить домен</a></li>
<li><a href="#">Хотинг</a></li>
</ul>
</li>
</div>

CSS

#navigation {
height : 65px;
}

#navigation ul li {
float: left;
position: relative;
}

#navigation ul li a {
color: #ffffff;
padding: 0 15px;
font-family: "Cuprum". sans-serif;
text-decoration: none;
line-height: 65px;
display: block;
height: 65px;
}

#navigation ul li a:hover {
background: rgba(183. 43. 43. 0.72);
text-decoration: underline;
}

#navigation .dropdown {
display: none;
position: absolute;
background-color: #6a6ae1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

/*
#navigation li:hover .dropdown {
display: block;
}*/

#navigation .dropdown li {
width: 100%;
}

JavaScript

var isOpen = false;

$('#open_menu').click(function() {
	if (isOpen) {
  	$('#dropdown_menu').hide();
    isOpen = false;
  } else {
  	$('#dropdown_menu').show();
    isOpen = true;
  }
});