JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
			<ul id="menu">
				<li><a href="#">Велосипеды</a></li>
				<li>
					<a href="#">Велоаксессуары</a>
					<div class="arrow"></div>
					<ul>
						<li><a href="#">Подпункт1</a></li>
						<li><a href="#">Подпункт1</a></li>
						<li><a href="#">Подпункт1</a></li>
						<li><a href="#">Подпункт1</a></li>
						<li><a href="#">Подпункт1</a></li>
						<li><a href="#">Подпункт1</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Велопокрышки</a>
					<div class="arrow"></div>
					<ul>
						<li><a href="#">Подпункт2</a></li>
						<li><a href="#">Подпункт2</a></li>
						<li><a href="#">Подпункт2</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Велозапчасти</a>
					<div class="arrow"></div>
					<ul>
						<li><a href="#">Подпункт</a></li>
						<li><a href="#">Подпункт</a></li>
						<li><a href="#">Подпункт</a></li>
					</ul>
				</li>
			</ul>
		</div>

CSS

* {
		margin: 0;
		padding: 0;
		
	}
	ul, li {
		list-style: none;
	}
	body{
		font: 20px/75px MyriadPro-Bold;
		color: #FFF;
	}
	a {
		font: 20px/75px MyriadPro-Bold;
		color: #FFF;
	}
		#menu{
			width: 1160px;
			margin: 0 auto;
		}
		.nav {
			background: url(http://velostandart.ru/wp-content/themes/velostandart/images/nav.png) repeat-x;
			height: 75px;
			line-height: 75px;
		}
		#menu a{
			text-align: center;
		}
		#menu ul {
			display: none;
		}
		#menu li:hover ul {
			display: inline-table;
		}
		#menu li a {
			display: block;
			float: left;
			width: 280px;
		}
		#menu li a:hover{
			text-decoration: none;
			background: #fff;
			border-top-left-radius: 13px;
			border-top-right-radius: 13px;
			border-top: 3px solid #03699e;
			border-left: 3px solid #03699e;
			border-right: 3px solid #03699e;
			color: #333;
		}

		#menu li {
			position:relative;
		}
		#menu li:hover {
			
		}
		#menu li:hover ul {
			position: absolute;
			top: 75px;
			background: #fff;
			border: 2px solid #03699e;
			width: 1160px;
			border-bottom-left-radius: 13px;
			border-bottom-right-radius: 13px;
			overflow: hidden;
			
			
		}
		#menu li:hover ul li{
			width: 250px;
			float: left;
			padding-left: 15px;
		}
		#menu li:hover ul li a{
			color: #333;
			border: 0;
			border-radius: 0;
			text-align: left;
		}