时间戳

首页 > 解决方案 > CSS Flex menu with submenu direction and line break

html - CSS Flex menu with submenu direction and line break

问题描述

Considering the following menu code JSFiddle here:

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

And 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. How do I make the submenu to open on vertical, not horizontal ?

b. How do I allow the submenu text not to brake (open with greater width that its parent) ?

标签： htmlcssflexbox

解决方案

a) 您正确设置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 > uland.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>

推荐阅读