JSFiddle - React, Tailwind, and code Playground

by Dmitry Fateev

HTML

<div class="contentMenuSite" style="padding-left:25px;width:470px;height:30px;background-color:DimGrey;list-style-type:none;">
  <ul class="mainMenu" style="">
    <li style="float:left;position:relative;height:100%;">
      <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Главная</a>
    </li>
    <li style="float:left;position:relative;height:100%;">
      <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Новости</a>
    </li>
    <li style="float:left;position:relative;height:100%;">
      <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Контакты</a>
      <ul class="subMenu" style="display:none;position:absolute;background-color:DimGrey;">
        <li style="float:none;">
          <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Адрес</a>
        </li>
        <li style="float:none;">
          <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Телефон</a>
        </li>
        <li style="float:none;">
          <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">Email</a>
        </li>
      </ul>
    </li>
    <li style="float:left;position:relative;height:100%;">
      <a href="#" style="display:block;padding:6px;width:100px;text-align:center;">О нас</a>
    </li>
  </ul>
</div>

CSS

.mainMenu li:hover {
  background-color: Black;
}

.mainMenu a:hover {
  color: Red;
}

.mainMenu a {
  transition: all .2s ease-in;
}

li:hover ul.subMenu {
  display: block !important;
}