hover

https://webref.ru/css/hover

by Aleksandr Tomashov

HTML

<ul>
  <li><a href="#">Русская кухня</a>
    <ul>
      <li><a href="#">Бефстроганов</a></li>
      <li><a href="#">Гусь с яблоками</a></li>
      <li><a href="#">Крупеник новгородский</a></li>
      <li><a href="#" class="brd">Раки по-русски</a></li>
    </ul>
  </li>
  <li><a href="#">Украинская кухня</a>
    <ul>
      <li><a href="#">Вареники</a></li>
      <li><a href="#">Жаркое по-харьковски</a></li>
      <li><a href="#">Капустняк черниговский</a></li>
      <li><a href="#" class="brd">Потапцы с помидорами</a></li>
    </ul>
  </li>
  <li><a href="#">Кавказская кухня</a>
    <ul>
      <li><a href="#">Суп-харчо</a></li>
      <li><a href="#">Лилибдж</a></li>
      <li><a href="#">Чихиртма</a></li>
      <li><a href="#" class="brd">Шашлык</a></li>
    </ul>
  </li>
  <li><a href="#" class="brd">Кухня Средней Азии</a></li>
</ul>

CSS

ul {
     width: 180px;
     list-style: none;
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
     font-size: 10pt;
   }
   
   li ul {
     position: absolute;
     display: none;
     margin-left: 165px;
     margin-top: -2em;
   }