JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="wrap">
<ul class="menu">
<li><a href="#">Номера</a></li>
<li><a href="#">Цены</a>
<ul>
<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="#">Бронирование</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<div class="content">
</div>
</div>
</body>
CSS
* {padding:0; margin:0; border: none;
}
body {
background: ;
}
.wrap {
min-height: 100%;
width: 980px;
}
.menu {
position: relative;
z-index: 6;
font: 16px "Times New Roman";
font-style: italic;
border-top: 1px solid #52545c;
border-left: 1px solid #52545c;
border-right: 1px solid #52545c;
display:table;
margin: 35px auto 0;
color: #9798a3;
}
.menu > li {
position: relative;
float: left;
}
.menu > li > a {
padding: 30px 0;
display: block;
text-align: center;
width: 195px;
background-color: rgba(0, 0, 0, 0.25);
}
.menu > li > a:hover {
background-color: rgba(89, 90, 107, 0.65);
}
.menu ul {
position: absolute;
left:-9999px;
opacity: 0;
}
.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
display:block;
}
...