JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        <a href="#" class="parrent">О компании</a>
        <ul>
            <li>Новости</li>
            <li>Контакты</li>
        </ul>
    </li>
    <li>
        <a href="#" class="parrent">Галерея</a>
        <ul>
            <li>Альбом 1</li>
            <li>Альбом 1</li>
        </ul>
    </li>
    <li>
        <a href="#" class="parrent">Статьи</a>
        <ul>
            <li>Категория 1</li>
            <li>Категория 2</li>
        </ul>
    </li>
</ul>
<div class="menuMargin"></div>
<div class="content">Некоторый контент который должен ездить вместе с меню</div>

CSS

* {
  margin:0px;
  padding:0px;
}
body {
  font-family:arial;
}
a {
  outline:none;
  position:relative;
  z-index:10;
  color:#333;
}
ul li {
  display:inline-block;
  padding:20px;
}
ul li ul {
  display:none;
  position:absolute;
  top:50px;
  width:100%;
  background-color:#333;
  left:0px;
  color:#fff;
  height:150px;
}
.menuMargin {
  height:150px;
  display:none;
}
ul li ul li {
  display:block;
}

JavaScript

jQuery( document ).ready(function( $ ) {
  $(function () {
      var links = $('.menu a.parrent');
      links.click(function (e) {
          links.not(this).siblings('ul').slideUp(300);
          $(this).siblings('ul').slideToggle(300);
        	$('.menuMargin').slideToggle(300);
      });
  });
});