可點擊和懸停菜單css

Question

所以我想要一個下拉菜單，但它不會在左側彈出，而是會在不覆蓋其他子主題的情況下彈出，因此這些其他子主題將浮動到 bot。 我在油漆上做了這個蒙太奇，所以你可以看到我想要的：

在此處輸入圖片說明

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

我剛剛刪除了一些定位塊絕對的類，這就是為什么菜單沒有出現在你想要的地方。 希望它會有所幫助。