JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="top-menu">
			<nav>
				<ul class="menu">
				    <li><a href="">Главная</a></li>
				    <li class="sub-menu"><a href="">О компании</a>
				    	<ul>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				            <li><a href="">Для клиентов</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				            <li><a href="">Для клиентов</a></li>
				            <li><a href="">Реклама</a></li>
				        </ul>
				    </li>
				    <li class="sub-menu"><a href="">Контакты</a>
				        <ul>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				            <li><a href="">Для клиентов</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				            <li><a href="">Для клиентов</a></li>
				            <li><a href="">Реклама</a></li>
				        </ul>
				        </li>
				    <li><a href="">Blog</a></li>
                    <!--добавляем класс sub-menu-last-->
				    <li class="sub-menu sub-menu-last"><a href="">Contact</a>
				    		 <ul>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				            <li><a href="">Для клиентов</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Portfolio 4 Columns</a></li>
				            <li><a href="">Клиенты</a></li>
				            <li><a href="">Для партнеров</a></li>
				   ...

CSS

.top-menu {
	float: right;
	position: relative;
	margin-top: 25px;
}
ul.menu {
	display: inline-block;
}

ul.menu li {
	float: left;
	list-style: none;
	position: relative;
}

ul.menu li a {
	color: #bdc3c7;
	display: block;
	padding: 10px 17px;
	text-decoration: none;
	border-radius: 2px;
}

ul.menu li.sub-menu a {
	color: #bdc3c7;
	display: block;
	padding: 10px 17px 34px;
	text-decoration: none;
}

ul.menu li.sub-menu a:hover {
	background-color: #34495e;
	color: #e3e3e3
}

ul.menu li a:hover {
	background-color: #1abc9c;
	color: #fff;
	border-radius: 2px;
}

/*Выпадающее меню*/
ul.menu li ul {
	display: none;
}

ul.menu li.sub-menu:hover {
    background-color: #34495e;
    color: #e3e3e3;
    border-radius: 2px 2px 0 0 ;
}
ul.menu li.sub-menu:hover ul {
	display: block;
	position: absolute;
	top: 60px;
	z-index: 99999999;
}
/*добавляем стили sub-menu-last*/
ul.menu li.sub-menu-last:hover ul {
    right: 0;
}

ul.menu li.sub-menu:hover ul li {
	float: none;
	background-color: #34495e;
	border-right: none;
	width: 200px;
}

ul.menu li.sub-menu:hover ul li a {
	color: #ecf0f1;
	padding: 6px 20px 8px;
}

ul.menu li.sub-menu:hover ul li a:hover {
	background-color: transparent;
	color: #bdc3c7;
}