JSFiddle - React, Tailwind, and code Playground

HTML

<menu>
    <li>
		<a href="#">Пункт 1</a>
        <ul class="sub_menu">
            <li>
				<a href="#">Подпункт 1.1</a>
				<div class="menu_preview">Одним из главных достижений современной стоматологии считается появление новой технологии протезирования – зубной имплантации.</div>
			</li>
            <li>
				<a href="#">Подпункт 1.2</a>
				<div class="menu_preview">В большинстве случаев существенно улучшить внешний вид и получить эффект омоложения возможно без операции.</div>
			</li>
            <li>
				<a href="#">Подпункт 1.3</a>
				<div class="menu_preview">Постоянных посетителей ждут подарочные сертификаты на косметологические услуги.</div>
			</li>
			<div class="menu_preview">Анонс Пункта 1</div>
        </ul>
    </li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
	<li><a href="#">Пункт 4</a></li>
</menu>

CSS

menu, ul{
    list-style:none;
	padding:0;
}

menu>li{
    display:inline;
    position:relative;
	margin-left:10px;
}

menu>li>a:hover+ul>div.menu_preview{
	display:block;
}

.sub_menu{
    position:absolute;
    top:25px;
    left:0;
    width:300px;
    background:#eee;
    border:1px solid #ccc;
	padding:10px;
}

.sub_menu>li+li{
	margin-top:5px;
}

.menu_preview{
	position:absolute;
	top:0;
	right:0;
	margin-left:150px;
	display:none;
}

.sub_menu>li>a:hover+div.menu_preview{
	display:block;
}