JSFiddle - React, Tailwind, and code Playground

by alacka

HTML

<div class="top-menu">
			<div class="moduletable_menu">
				<h3>Заголовок меню</h3>
				<ul>
					<li><a href="">О нас</a>
						<ul>
							<li>Онас 2</li>
							<li>Онас 3</li>
						</ul>
					</li>
					<li><a href="">Контакты 2</a>
						<ul>
							<li>Онас 2</li>
							<li>Онас 3</li>
						</ul>
					</li>
					<li><a href="">Контакты</a></li>
				</ul>
			</div>
		</div>

CSS

.top-menu h3 {
	display: none;
}
.top-menu ul {
	margin: 0 auto;
	padding: 0;
	display: table;
}
.top-menu li {
	width: 127px;
	height: 27px;
	float: left;
	list-style-type: none;
	margin: 0 10px 0 0;
	text-align: center;
	background: url(images/menu-bg.jpg) repeat-x;
}
.top-menu li a:hover {
     border-right: 1px solid #fff;
     border-left: 1px solid #fff;
     border-bottom: 1px solid #fff;
}
.top-menu li a {
	height: 23px;
	padding: 4px 0 0 0;
	font: 14px Arial;
	text-transform: uppercase;
	color: #145f66;
	text-decoration: none;
	display: block;
}
.top-menu ul li ul {
	display:none;
}
.top-menu li:hover .top-menu ul li ul {
	display:block;
}