html - 可点击和悬停菜单CSS

Question

所以我想要一个下拉菜单，但它不会在左侧弹出，而是会向下弹出而不覆盖其他子主题，因此这些其他子主题将 float 到机器人。 我在油漆上制作了这个蒙太奇，所以你可以看到我想要的东西:

enter image description here

nav ul {
  box-shadow: 0px 0px 5px  whitesmoke;
  list-style-type: none;
  background-color: #FB030F;
  margin: 0;
  padding: 0;
  width:calc(100% - 3px);
  
}

nav > ul > li ul  {
  display: none;
}

nav ul > li {
  display: block;
  position: relative;
}


nav #m {
  display: block;
  padding: 5px 5px;
  text-decoration: none;
  white-space: nowrap;
  color: white;
}

nav #m:hover {
  background-color: #ff7373;
}

nav > ul li:hover > ul {
  display: block;
  position: absolute;
  top: 0;
  top: 100%;
}
ul li:hover > #n {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

nav a {
  text-align: center;
}

<nav>

    <ul>
      <li><a href="builds.html" id="m">Builds</a>
        <ul id="n">
          <li><a href="build1.html" id="m">Build 1</a></li>
          <li><a href="build2.html" id="m">Build 2</a></li >
          <li><a href="build3.html" id="m">Build 3</a></li>
          <li><a href="build4.html" id="m">Build 4</a></li>
          <li><a href="build5.html" id="m">Build 5</a></li>
          <li><a href="build6.html" id="m">Build 6</a></li>
          <li><a href="build7.html" id="m">Build 7</a></li>
          <li><a href="build8.html" id="m">Build 8</a></li>

        </ul>
      </li>
      <li><a href="configurador.html" id="m">Configurador</a></li>
      <li><a href="info.html" id="m">Componentes</a></li>
      <li><a href="help.html" id="m">Guia</a></li>
    </ul></li>


</nav>

让我在这里写点东西，这样我就可以发布这个问题了，因为堆栈溢出告诉我我不能发布这个，因为我的代码太多了，所以我必须添加更多细节。但我想我的疑问很简单，我不需要添加更多信息，如果我错了请告诉我。

Answer 1

如果我理解正确，那么试试这个:

nav ul {
  box-shadow: 0px 0px 5px  whitesmoke;
  list-style-type: none;
  background-color: #FB030F;
  margin: 0;
  padding: 0;
  width:calc(100% - 3px);
}

nav > ul > li ul  {
  display: none;
}

nav ul > li {
  display: block;
  position: relative;
}


nav #m {
  display: block;
  padding: 5px 5px;
  text-decoration: none;
  white-space: nowrap;
  color: white;
}

nav #m:hover {
  background-color: #ff7373;
}

nav > ul > li:hover ul {
  display: block;
}

nav a {
  text-align: center;
}

我刚刚删除了一些绝对定位 block 的类，这就是为什么菜单没有出现在您想要的位置。 希望对您有所帮助。