Question

我正在尝试创建一个可以像this一样工作的可下载的下拉菜单。

但是，似乎我的网站的下拉菜单没有出现。

在检查代码后（使用Chrome中的开发者工具），我发现我的下拉菜单被 #content div掩盖了。

如何将下拉菜单置于顶部？

＆＃13;

body {
  margin: 0;
  font-family: "Comic Sans MS", cursive, sans-serif;
  background-color: #000000;
  background-size: cover;
  background-attachment: fixed;
  color: #ffffff;
  background-image: url("../background/home.jpg")
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#home {
  float: left;
  font-size: 1.5em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(236, 130, 53, 0.75);
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a {
  transition: all 0.5s;
}

#content {
  margin-top: 61px;
  animation: fadein 5s;
}

.menu a {
  color: #0000ff;
  font-size: 1.5em;
  font-weight: bold;
}

.menu a:hover {
  background-color: #ff0000;
  color: #ffffff;
}

.menu {
  display: inline-block
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.menu:hover .dropdown-content {
  display: block;
}

＆＃13;

<body>
  <div id="navigation-menu">
    <ul>
      <li class="menu">
        <a href="#">Transport</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div id="content">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
  </div>
</body>

＆＃13;

Answer 1

从overflow: hidden;

中删除<ul>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgba(236, 130, 53, 0.75);
  position: fixed;
  top: 0;
  width: 100%;
}

这会阻止内容流到div之外，为你提供所需的效果。

Answer 2

从ul移除.dropdown-content。这会导致您的body { margin: 0; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #000000; background-size: cover; background-attachment: fixed; color: #ffffff; background-image: url("../background/home.jpg") } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #home { float: left; font-size: 1.5em; } ul { list-style-type: none; margin: 0; padding: 0; background-color: rgba(236, 130, 53, 0.75); position: fixed; top: 0; width: 100%; } li { float: right; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } a { transition: all 0.5s; } #content { margin-top: 61px; animation: fadein 5s; } .menu a { color: #0000ff; font-size: 1.5em; font-weight: bold; } .menu a:hover { background-color: #ff0000; color: #ffffff; } .menu { display: inline-block } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .menu:hover .dropdown-content { display: block; }被隐藏。

<body>
  <div id="navigation-menu">
    <ul>
      <li class="menu">
        <a href="#">Transport</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div id="content">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
  </div>
</body>

{{1}}

可暂停的下拉菜单未显示

2 个答案: