JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div id="menu">
	<ul>
		<li><a href="#">Контрольно-пропускной пункт</a></li>
		<li><a href="#">Схема склада</a></li>
		<li><a href="#">Новости компании</a></li>
		<li>
			<a href="#">Дополнительные услуги</a>
            <ul>
                <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="#">О компании</a></li>
		<li><a href="#">Контакты</a></li>
	</ul>
</div>

CSS

#menu {
    display: table;
}

#menu ul li {
    display: table-cell;
    position: relative;
}

#menu > ul > li > a {
    display: inline-block;
    padding: 10px 18px;
    background: #333;
    color: #fff;
    text-decoration: none;
    white-space: nowrap; /* <- nowrap */
}

#menu ul li ul {
    position: absolute;
    top: 50px;
    right: 0;
}

#menu ul li ul li a {
    background: #333;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    white-space: nowrap; /* <- nowrap */
}