css 下拉菜单用它扩展了整个导航栏

Question

下拉问题

我正在尝试制作一个纯 CSS 下拉菜单，并且我已经查看了有关此问题的其他问题，但似乎没有一个解决方案有效。我遇到的问题是，当我将鼠标悬停在下拉按钮上时，它确实会显示菜单，但是它会将整个导航栏都拉下来。

body {
  background-color: #15083E;
  margin: 0;
}

.top-buttons {
  position: fixed;
  width: 100%;
  z-index: 99;
}

.top-buttons #logo {
  font-family: arial;
  text-align: center;
  padding: 14px;
  background-color: white;
}

.top-buttons>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #15083E;
  border-style: solid;
  border-bottom: 1px solid white;
  position: relative;
}

.top-buttons>ul>li {
  float: left;
}

.top-buttons>ul>li>ul {
  display: none;
  background: #666;
  padding: 0;
  position: relative;
  top: 100%;
}

.top-buttons>ul>li a {
  display: block;
  color: white;
  font-family: arial, sans-serif;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  min-width: 7em;
}

.top-buttons li a:hover {
  background-color: #CC3E54;
}

.active {
  background-color: #CC3E54;
}

.top-buttons ul li:hover>ul {
  display: block;
  position: relative;
  float: none;
  max-width: 7rem;
}

.top-buttons ul ul {
  display: none;
  position: absolute;
  vertical-align: top;
}

.top-buttons>ul ul>li {
  background-color: #15083E;
  list-style-type: none;
}

.top-buttons>ul ul>li a {
  background-color: #15083E;
}

<nav class="top-buttons">
  <ul>
    <li id="logo">Logo</li>
    <li><a class="active" href="index.htm">Home</a></li>
    <li><a href="#">Placeholder</a></li>
    <li><a>DropDown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

我的 html 可能不是最好的，我对它比较陌生。

任何建议将不胜感激！

Answer 1

您的 HTML 还不错。你非常接近一个可行的解决方案。您缺少的主要内容是您的下拉菜单需要在其相对定位的父元素内使用绝对定位。父元素需要相对定位的原因是绝对定位的子元素（下拉菜单）可以包含在其中，否则它将最终出现在您不想要的位置。

另一个需要解决的重要问题是顶层ul 上的overflow: hidden;。一旦为下拉菜单设置了绝对定位，溢出隐藏将隐藏ul 之外的任何内容。你不想要那个。如果您将其移除，那么您的底部边框不会出现在您想要的位置，因此您需要另一种方法来清除浮动的li。我使用了clearfix 来执行此操作，因此在ul 上添加了.cf 类。

body {
  background-color: #15083E;
  margin: 0;
}

.top-buttons {
  position: fixed;
  width: 100%;
  z-index: 99;
}

.top-buttons #logo {
  font-family: arial;
  text-align: center;
  padding: 14px;
  background-color: white;
}

.top-buttons>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background-color: #15083E;
  border-style: solid;
  border-bottom: 1px solid white;
  /* position: relative; */
}

.top-buttons>ul>li {
  position: relative;
  /* added */
  float: left;
}

.top-buttons>ul>li>ul {
  display: none;
  background: #666;
  padding: 0;
  /* position: relative; */
  position: absolute;
  /* top: 100%; */
}

.top-buttons>ul>li a {
  display: block;
  color: white;
  font-family: arial, sans-serif;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  min-width: 7em;
}

.top-buttons li a:hover {
  background-color: #CC3E54;
}

.active {
  background-color: #CC3E54;
}

.top-buttons ul li:hover>ul {
  display: block;
  /* position: relative; */
  /* float: none; */
  max-width: 7rem;
}


/*
.top-buttons ul ul {
  display: none;
  position: absolute;
  vertical-align: top;
}
*/

.top-buttons>ul ul>li {
  background-color: #15083E;
  list-style-type: none;
}

.top-buttons>ul ul>li a {
  background-color: #15083E;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

<nav class="top-buttons">

  <ul class="cf">
    <li id="logo">Logo</li>
    <li><a class="active" href="index.htm">Home</a></li>
    <li><a href="#">Placeholder</a></li>
    <li><a>DropDown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
  </ul>
  
</nav>

我看到 CSS 的一些改进领域，但总体上还不错。