时间戳

首页 > 解决方案 > HTML/CSS 下拉菜单未覆盖或显示在块中

html - HTML/CSS 下拉菜单未覆盖或显示在块中

问题描述

让我的下拉菜单在悬停时正确显示有些麻烦；尽管 z-index 设置为 1，但它目前全部显示在一行上，而且似乎也没有覆盖。尝试制作项目 ap、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/

标签： htmlcssdropdown

解决方案

您没有在navbardiv 容器中留出足够的空间来扩展菜单，这就是它被切断的原因。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>

推荐阅读