Question

我有一个简单的网站，并且一切运行正常，但我想使其变得更现代，但我不知道我所做的更改使下拉菜单停止工作。

我是btw编码的新手，我使用Visual Studio Code。

我没有尝试任何事情，因为我不想搞砸我的网站。

我的HTML和CSS代码（另请参见jsfiddle）：

<div class="header" id="header">
  <span id="header-title">Nellfin Solutions</span>
  <div class="dropdown">
      <span id="menu">&#9776 Menu</span>
      <div class="dropdown-content">
          <a href="index.html">Home</a>
          <a href="services.html">Services</a>
          <a href="products.html">Products</a>
          <a href="about.html">About Us</a>
          <a href="contact.html">Contact Us</a>
      </div>
  </div>
</div>

@import url(http://fonts.googleapis.com/css?family=Monstserrat:400,700);

body {
  background-image: url("backround.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  color: #555;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: rgba(255, 255, 255, 0.979);
}

.header {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#header {
  background-color: white;
  height: 50px;
  line-height: 50px;
  position: fixed;
  margin-top: 20px;
  width: 80%;
  transform: translate(12%, 0%)
}

#header-title {
  float: right;
  margin-right: 50px;
  font-size: 20px;
  color: orange;
}

.dropdown {
    position: relative;
    display: inline-block;
    background-color: white;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #555;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align: left;
    overflow: auto;
  }

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

  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    color: orange;
    background-color: #6F6F6F;
  }

  #menu {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 10px;
    margin-top: 0px;
    color: orange;
    font-weight: bold;
    position: relative;
  }

.body h1 {
  position: relative;
  padding-top: 100px;
  padding-left: 200px; 
  text-transform: uppercase;
  color: orange;
}

Answer 1

由于.body h1中的相对位置，它更改了z索引位置。您可以将.body h1的位置减小到0以下。

.body h1 {
  z-index: -1;
}

或者您可以删除h1的位置。

.body h1 {
  position: relative(no need to use this css line)
}

Answer 2

将鼠标悬停在下拉菜单上不起作用，因为您将其放在其前面（可以使用检查器查看）。因此，将标头放在前面：

.header {
  z-index: 1000;
}

提琴：fiddle

我的下拉列表内容不会显示，但在我移动标题之前就显示了

2 个答案: