JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav class="matulok-sangerum">	
    <input type="checkbox" id="button">
    <label for="button" onclick>Главная</label>
	<ul>
		<li>
			<a href="#">ZORNET.RU</a>
		</li>
		<li>
<a href="#">Каталог uCoz</a>
<ul>
<li><a href="#">Скрипты для сайта</a></li>
<li><a href="#">Шаблоны для сайта</a></li>
<li><a href="#">Дизайн для сайта</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Дизайн</a>
			<ul>
<li><a href="#">Скрипты для сайта</a></li>
<li><a href="#">Шаблоны для сайта</a></li>
<li><a href="#">Дизайн для сайта</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Стили CSS</a>
		</li>						
	</ul>
</nav>

CSS

.matulok-sangerum > ul:after {
  content: "";
  display: table;
  clear: both;
}

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

.matulok-sangerum {
  font: bold 13px Arial, Helvetica;
}
.matulok-sangerum * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.matulok-sangerum ul {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.matulok-sangerum li {
  position: relative;
}
.matulok-sangerum li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.matulok-sangerum li:hover > a {
    color: #f3ecec;
}
.matulok-sangerum input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.matulok-sangerum label {
  display: none;
  cursor: pointer;
  user-select: none;
}

.matulok-sangerum > ul {
    border: 1px solid #191616;
    background-color: #151414;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(243, 235, 235, 0.33)), color-stop(100%, rgba(236, 233, 233, 0.05)));
    background-image: -webkit-linear-gradient(rgba(243, 234, 234, 0.27), rgba(236, 229, 229, 0.05));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(243, 238, 238, 0.27), rgba(239, 229, 229, 0));
    -webkit-box-shadow: 0 1px 0 rgba(239, 230, 230, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    box-shadow: 0 1px 0 rgba(247, 236, 236, 0.2) inset;
}
.matulok-sangerum > ul > li {
    float: left;
    border-right: 1px solid #545252;
    -webkit-box-shadow: 1px 0 0 #292828;
    -moz-box-shadow: 1px 0 0 #383838;
    box-shadow: 1px 0 0 #252424;
}
.matulok-sangerum > ul > li >...