Question

我有两级菜单（主菜单和嵌套菜单）。菜单在小屏幕尺寸上显示为Flex列，但当我将鼠标悬停在主菜单上时，子菜单显示在主菜单的顶部。如何在展开时按下主菜单为子菜单创建需求空间？

#main-menu ul {
    display: flex;
    flex-direction: row;
    background-color: #F2F3F4;
    padding: 0;
}
#main-menu ul li {
    position: relative;
    flex: 1 0 auto;
    text-align: left;
}
#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;
}
#main-menu ul ul {
    left: 0;
    top: 10;
}
#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
    display: flex;
    flex-direction: column;
}
#main-menu ul a {
    display: block;
    padding: 10px;
}
#main-menu ul a:hover {
    background-color: #B2BABB;
}
@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
}

<nav id="main-menu">
<ul>
    <li><a href="#">Item 1</a>
        <ul id="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
</nav>

Answer 1

重叠是由内部ul设置为position: absolute引起的，这只是意味着ul被取消流量而不是影响任何其他元素。

#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;              /*  this needs to be changed  */
}

只需在媒体查询中添加新规则，即覆盖较小屏幕上的先前设置

@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
    #main-menu li ul {                         /*  added  */
        position: relative;
    }
}

Stack snippet

#main-menu ul {
    display: flex;
    flex-direction: row;
    background-color: #F2F3F4;
    padding: 0;
}
#main-menu ul li {
    position: relative;
    flex: 1 0 auto;
    text-align: left;
}
#main-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}
#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
    display: flex;
    flex-direction: column;
}
#main-menu ul a {
    display: block;
    padding: 10px;
}
#main-menu ul a:hover {
    background-color: #B2BABB;
}
@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
    #main-menu li ul {
        position: relative;
    }
}

<nav id="main-menu">
<ul>
    <li><a href="#">Item 1</a>
        <ul id="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
</nav>

您还有这两条规则，

#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;
}
#main-menu ul ul {
    left: 0;
    top: 10;                   /*  invalid value, needs a unit (if not a "0")  */
}

我合并为1并更正了top: 10属性/值。

#main-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;                 /*  changed so it start at the bottom of its parent  */
    width: 100%;
}

Answer 2

您可以为submenu添加position：static：

#main-menu ul {
  display: flex;
  flex-direction: row;
  background-color: #F2F3F4;
  padding: 0;
}

#main-menu ul li {
  position: relative;
  flex: 1 0 auto;
  text-align: left;
}

#main-menu li ul {
  display: none;
  width: 100%;
  position: absolute;
}

#main-menu ul ul {
  left: 0;
  top: 10;
}

#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
  display: flex;
  flex-direction: column;
}

#main-menu ul a {
  display: block;
  padding: 10px;
}

#main-menu ul a:hover {
  background-color: #B2BABB;
}

@media only screen and (max-width: 768px) {
  #main-menu ul {
    flex-direction: column;
  }
  
  /* new */
  #main-menu ul ul {
    position: static;
  }
}

<nav id="main-menu">
  <ul>
    <li><a href="#">Item 1</a>
      <ul id="sub-menu">
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

如何使用Flex CSS扩展嵌套菜单时按下主菜单？

2 个答案: