如果li的列表高于ul，则创建列

Question

如果将鼠标悬停在我的代码段中的菜单1上，您可以看到它包含的项目列表比ul显示的更多，因为它的高度仅为80px，如何创建新的“列”以使其正确显示

应该是：

Menu 1
--------------------------------
Menu 1.1    Menu 1.2    Menu 1.3
Menu 1.2    Menu 1.3 
Menu 1.3    Menu 1.1
Menu 1.1    Menu 1.2

ul.nav {
  float: left;
  list-style: none;
  padding: 0;
  position: relative;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  color: white;
  padding:20px;
  background-color: red;
  display: block;
}

ul.nav > li > ul {
  background-color: blue;
  display: none;
  left: 0;
  list-style:none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 80px;
}
ul.nav>li>ul>li>{
  display:block;
}

ul.nav>li>ul>li>a {
  color: white;
}

ul.nav>li>a:hover~ul {
  display: block
}
.clear{
  clear:both;
}

<ul class="nav">
  <li>
    <a href="#">Menu 1.0</a>
    <ul>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2.0</a>
    <ul>
      <li>
        <a href="#">Menu 2.1</a>
      </li>
      <li>
        <a href="#">Menu 2.2</a>
      </li>
      <li>
        <a href="#">Menu 2.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3.0</a>
    <ul>
      <li>
        <a href="#">Menu 3.1</a>
      </li>
      <li>
        <a href="#">Menu 3.2</a>
      </li>
      <li>
        <a href="#">Menu 3.3</a>
      </li>
    </ul>
  </li>
</ul>
<div class="clear"></div>

Answer 1

你可以使用flex属性：

ul.nav>li>a:hover~ul {
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
}

ul.nav {
  float: left;
  list-style: none;
  padding: 0;
  position: relative;
}

ul.nav>li {
  float: left;
}

ul.nav>li>a {
  color: white;
  padding:20px;
  background-color: red;
  display: block;
}

ul.nav > li > ul {
  background-color: blue;
  display: none;
  left: 0;
  list-style:none;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 80px;
}
ul.nav>li>ul>li>{
  display:block;
}

ul.nav>li>ul>li>a {
  color: white;
}

ul.nav>li>a:hover~ul {
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
}
.clear{
  clear:both;
}

<ul class="nav">
  <li>
    <a href="#">Menu 1.0</a>
    <ul>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
      <li>
        <a href="#">Menu 1.1</a>
      </li>
      <li>
        <a href="#">Menu 1.2</a>
      </li>
      <li>
        <a href="#">Menu 1.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 2.0</a>
    <ul>
      <li>
        <a href="#">Menu 2.1</a>
      </li>
      <li>
        <a href="#">Menu 2.2</a>
      </li>
      <li>
        <a href="#">Menu 2.3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3.0</a>
    <ul>
      <li>
        <a href="#">Menu 3.1</a>
      </li>
      <li>
        <a href="#">Menu 3.2</a>
      </li>
      <li>
        <a href="#">Menu 3.3</a>
      </li>
    </ul>
  </li>
</ul>
<div class="clear"></div>