nline в списке с атрибутом hover

Question

текущий код выводит список в столбик, мне же нужен вывод в строчку, простой display: inline; не помогает

li {
  display: inline;
}

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: -5em;
  /* Сдвигаем подменю вверх */
}

li a {
  display: block;
  /* Ссылка как блочный элемент */
  padding: 5px;
  /* Поля вокруг надписи */
  text-decoration: none;
  /* Подчеркивание у ссылок убираем */
  color: #666;
  /* Цвет текста */
  border: 1px solid #ccc;
  /* Рамка вокруг пунктов меню */
  background-color: #f0f0f0;
  /* Цвет фона */
  border-bottom: none;
  /* Границу снизу не проводим */
}

li a:hover {
  color: #ffe;
  /* Цвет текста активного пункта */
  background-color: #5488af;
  /* Цвет фона активного пункта */
}

li:hover ul {
  display: block;
  /* При выделении пункта курсором мыши отображается подменю */
}

.brd {
  border-bottom: 1px solid #ccc;
  /* Линия снизу */
}

<ul class="menu">
  <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>

Answer 1

Можно вот так:

.menu {
  display: flex;
  width: auto;
}

.menu>li{
  position: relative;
}

.menu li ul{
  position: absolute;
  /* Подменю позиционируются абсолютно */
  display: none;
  /* Скрываем подменю */
}

ul {
  /* Ширина меню */
  list-style: none;
  /* Для списка убираем маркеры */
  margin: 0;
  /* Нет отступов вокруг */
  padding: 0;
  /* Убираем поля вокруг текста */
  font-family: Arial, sans-serif;
  /* Рубленый шрифт для текста меню */
  font-size: 10pt;
  /* Размер названий в пункте меню */
}


li a {
  display: block;
  /* Ссылка как блочный элемент */
  padding: 5px;
  /* Поля вокруг надписи */
  text-decoration: none;
  /* Подчеркивание у ссылок убираем */
  color: #666;
  /* Цвет текста */
  border: 1px solid #ccc;
  /* Рамка вокруг пунктов меню */
  background-color: #f0f0f0;
  /* Цвет фона */
  border-bottom: none;
  /* Границу снизу не проводим */
  width: 150px;
}

li a:hover {
  color: #ffe;
  /* Цвет текста активного пункта */
  background-color: #5488af;
  /* Цвет фона активного пункта */
}

li:hover ul {
  display: block;
  /* При выделении пункта курсором мыши отображается подменю */
}

.brd {
  border-bottom: 1px solid #ccc;
  /* Линия снизу */
}

<ul class="menu">
  <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="#">Кухня Средней Азии</a></li>
</ul>

Но я бы на вашем месте причесал немного код, поприсваивал классы внутренним спискам, потому что просто по тегам иногда сложновато проследить, какой элемент стилизуется.

БЛОГ НА HUSL

nline в списке с атрибутом hover

Ответы (1 шт):