JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
 <li><a href="#">Главная</a></li>
 <li><a class="novosti" href="#">Новости</a>
  <ul class="drop">
   <li><a href="#">В мире</a></li>
   <li><a href="#">В стране</a></li>
  </ul>
 </li>
 <li><a href="#">Статьи</a></li>
 <li><a href="#">Видео</a></li>
 <li><a href="#">Контакты</a></li>
</ul>

CSS

body { margin: 0 auto; width: 1000px;}
   li {float: left; border: 1px solid #ccc; list-style-type: none; padding: 5px;}
   li:hover {background: #dedede;}
   a {display: block; text-decoration: none; color: #ccc;}
   a:hover { color:#cc0; }   
   ul.drop {  margin: 5px 0 0 -47px; position: absolute; width: 44em; display: none; }
   ul.drop li { width: 100px; }
   li:hover ul.drop { display: block; }
li:hover .novosti { color:#cc0; 
}