CSS Flex меню с направлением подменю и разрывом строки

Question

Учитывая следующий код меню JSFiddle здесь :

<div class="menu">
<nav>
  <ul>
    <li>Logo</li>
    <li>
      Services
      <div class="menu-submenu">
        <ul>
          <li>Very big text here in this option</li>
          <li>Option</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      </div>
    </li>
    <li>Support</li>
    <li>Contact</li>
  </ul>
  </nav>
</div>

И CSS:

.menu {
  width: 100%;
  background-color: white;
  margin-bottom: 5px;
}

.menu nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.menu nav ul li:first-child {
  padding-left: 10%;
  padding-top: 5px;
  padding-right: 30px;
}

.menu nav ul li:not(:first-child) {
  line-height: 30px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.menu nav ul li:first-child {
  height: 30px;
}

.menu nav ul li:last-child {
  margin-left: auto;
  margin-right: 10%;
  align-self: flex-end;
}

.menu nav ul li:hover:not(:first-child) {
  background-color: blue;
  color: white;
}

.menu nav ul li {
  position: relative;
}

.menu-submenu {
  display: none;
}

.menu nav ul li:hover .menu-submenu {
  display: flex;
}

.menu-submenu ul {
  position: absolute;
  top: 30px;
  display: flex;
  flex-direction: column;
}

.menu-submenu ul li {
  flex: 1;
  background-color: red;
  z-index: 10;
}

a.Как сделать так, чтобы подменю открывалось по вертикали, а не по горизонтали?

b.Как разрешить тексту подменю не тормозить (открыть с большей шириной, чем его родитель)?

Answer 1

Вы можете сделать это лучше с меньшим количеством кода:

.menu, .menu * {margin: 0; padding: 0; box-sizing: border-box}

.menu {
  background: white;
  margin-bottom: 5px;
}

.menu ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.menu ul li {
  margin: 0 5px; /* adjust */
  padding: 5px; /* adjust */
}

.menu ul li:last-child {
  margin-left: auto;
}

.menu ul li:hover:not(:first-child) {
  background: blue;
  color: white;
}

.menu ul li:hover .menu-submenu {
  display: flex;
}

.menu-submenu {
  display: none;
  position: relative; /* added */
}

.menu-submenu ul {
  position: absolute;
  top: 5px; /* modified; adjust; needs to match the padding of the ".menu ul li" */
  left: -5px; /* added; adjust; needs to match the padding of the ".menu ul li" (negative) */
  display: flex;
  flex-direction: column;
}

.menu-submenu ul li {
  width: 100%; /* added */
  padding: 5px; /* adjust */
  white-space: nowrap; /* added */
  background: red;
  z-index: 10;
}

<nav class="menu">
  <ul>
    <li>Logo</li>
    <li>
      Services
      <div class="menu-submenu">
        <ul>
          <li>Very big text here in this option</li>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      </div>
    </li>
    <li>Support</li>
    <li>Contact</li>
  </ul>
</nav>

В противном случае точка использует white-space: nowrap для предотвращения разрыва строки и width: 100% для их выравнивания по ширине.Поскольку .menu-submenu ul имеет position: absolute, position: relative должен находиться на его родительском элементе .

Answer 2

а) Вы правильно установили flex-direction: column на .menu-submenu ul.Проблема в том, что вы также установили flex-direction: row на .menu nav ul с равным (но примененным) специфичностью .Чтобы исправить это, просто добавьте свой селектор .menu-submenu ul большей специфичности (например, изменив его на .menu-submenu > ul).

b) Ваш .menu nav ul li:first-child будет применен к и на панели навигации иподменю.Из-за ограничений height и padding это приводит к неправильному отображению подменю.Я считаю, что вы хотите применить его только к главной панели навигации.Таким образом, просто измените это правило, чтобы использовать дочерний комбинатор (>) , как .menu nav > ul > li:first-child.

. Вы захотите применить > по обе стороны от ul, чтобы нацелиться на вашу навигационную панель.Чтобы настроить таргетинг на подменю, вы должны использовать .menu .menu-submenu > ul и .menu .menu-submenu > ul > li, чтобы не запутаться в выборе меню.

Вот пример, демонстрирующий вертикальное подменю, а также удаление всех других правил, которыебыли (вероятно) неправильно применены к нему:

.menu {
  width: 100%;
  background-color: white;
  margin-bottom: 5px;
}

.menu nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.menu nav > ul > li:first-child {
  padding-left: 10%;
  padding-top: 5px;
  padding-right: 30px;
}

.menu nav > ul > li:not(:first-child) {
  line-height: 30px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.menu nav > ul > li:first-child {
  height: 30px;
}

.menu nav > ul > li:last-child {
  margin-left: auto;
  margin-right: 10%;
  align-self: flex-end;
}

.menu nav > ul > li:hover:not(:first-child) {
  background-color: blue;
  color: white;
}

.menu nav ul li {
  position: relative;
}

.menu-submenu {
  display: none;
}

.menu nav ul li:hover .menu-submenu {
  display: flex;
}

.menu .menu-submenu > ul {
  position: absolute;
  top: 30px;
  display: flex;
  flex-direction: column;
}

.menu .menu-submenu > ul > li {
  flex: 1;
  background-color: red;
  z-index: 10;
}

<div class="menu">
<nav>
  <ul>
    <li>Logo</li>
    <li>
      Services
      <div class="menu-submenu">
        <ul>
          <li>Very big text here in this option</li>
          <li>Option</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      </div>
    </li>
    <li>Support</li>
    <li>Contact</li>
  </ul>
  </nav>
</div>