HTML/CSS 下拉菜单未重叠或显示在块中

Question

悬停时无法正确显示下拉菜单；尽管 z-index 设置为 1，但它目前全部显示在一行上，而且似乎没有重叠。尝试将项目设为 p、a 和 div，但仍然感到困惑。有什么建议吗？

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <nav class="navbar">
        <a href="/" id="name-link">Name</a>
        <div class="dropdown">
            <a>Projects</a>
                <div class="dropdown-content">
                    <a href="/">Project 1</a>
                    <a href="/">Project 2</a>
                    <a href="/">Project 3</a>
                </div>
        </div>
        <a href="/about.html">About</a>
        <a href="/">Contact</a>
    </nav>
</body>
</html>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: .015em;
    color: #000000;
}

a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

a:hover, a:active {
    color: #a9c4d4;
    text-decoration: underline;
}

.navbar {
    overflow: hidden;
    font-size: 2.5em;
    font-weight: 700;
    position: fixed;
    top: 0;
    width: 100%;
    list-style-type: none;
    margin: 0px 0px 0px 110px;
    padding: 10px 0px 10px 0px;
    background-color: #ffffff;
}

.navbar a {
    float: left;
    display: block;
    margin: 10px;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    z-index: 1;
}

.dropdown-content a {
    float: none;
    margin: 10px;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}

#name-link {
    color: #a9c4d4;
    text-decoration: none;
}

a.selected-link {
    text-decoration: underline;
}

jsfiddle 在这里：https://jsfiddle.net/29gev50b/2/

Answer 1

您没有在 navbar div 容器中留出足够的空间来扩展菜单，这就是它被截断的原因。 z-index 无法工作，因为框 (div) 不够大。

将 min-height: 100px; 添加到您的 navbar 以修复。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .015em;
  color: #000000;
}

a:link,
a:visited {
  color: #000000;
  text-decoration: none;
}

a:hover,
a:active {
  color: #a9c4d4;
  text-decoration: underline;
}

.navbar {
  overflow: hidden;
  font-size: 2.5em;
  font-weight: 700;
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0px 0px 0px 110px;
  padding: 10px 0px 10px 0px;
  min-height: 100px;
  background-color: #ffffff;
}

.navbar a {
  float: left;
  display: block;
  margin: 10px;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  margin: 10px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#name-link {
  color: #a9c4d4;
  text-decoration: none;
}

a.selected-link {
  text-decoration: underline;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
  <nav class="navbar">
    <a href="/" id="name-link">Name</a>
    <div class="dropdown">
      <a>Projects</a>
      <div class="dropdown-content">
        <a href="/">Project 1</a>
        <a href="/">Project 2</a>
        <a href="/">Project 3</a>
      </div>
    </div>
    <a href="/about.html">About</a>
    <a href="/">Contact</a>
  </nav>
</body>

</html>

Answer 2

更改“dropdown-content”的css。绝对位置会做那件事。从“dropdown-content”中删除这个绝对位置css，它将正常工作。

HTML/CSS 下拉菜单未重叠或显示在块中

HTML/CSS dropdown menu not overlaying or displaying in block

html

css

dropdown