0

текущий код выводит список в столбик, мне же нужен вывод в строчку, простой 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>

1
  • 1
    И на будущее, не надо по три экземпляра вопроса создавать ;)
    – Вадим
    14 июн 2020 в 18:58

1 ответ 1

0

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

.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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.