我无法点击我的导航栏 HTML & CSS

Question

我正在建设一个网站，但我无法在主页上点击我网站的导航栏。

我试过改变很多东西，比如增加 z 位置，并用谷歌搜索了这个问题。不幸的是没有任何效果。

 *{
 margin: 0;
 padding: 0;
    }

    .content {
      max-width: 500px;
      margin: auto;
    }

    nav {
 float: right;
 margin-top: 30px;
 z-index: 2;
    }

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    nav li {
 display: inline-block;
    }

    nav a {
 color: white;
 text-decoration: none;
 padding: 5px 30px;
 font-family: "Times New Roman", Times, serif;
 font-size: 20px;
    }

    nav li.active a {
 border: 1px solid white;
    }

    nav li a:hover {
 border: 1px solid white;
    }

    body {
 font-family: monospace;
    }

    .hero {
 position: absolute;
 width: 100%;
 margin-left: 0px;
 margin-top: 0px;
    }

    h1 {
 color: white;
 font-size: 90px;
 text-align: center;
 margin-top: 20%;
    }

<header>

  <div class="container">
   <nav>
    <ul>
     <li class="active"><a href="index.html"> Home</a></li>
     <li><a href="services.html"> Services </a></li>
     <li><a href="contact.html"> Contact </a></li>
    </ul>
   </nav>
  </div>

  <div class="hero">
   <h1>Label</h1>
   <div class="button">
    <a href="services.html" class="button button-one"> Learn More</a>
   </div>
  </div>

  <div class="hero">
  <h2>Name</h2>
  </div>

 </header>

也链接到服务页面的'Learn More'按钮工作正常，但我仍然无法点击导航栏，甚至服务页面。悬停效果也不行。

提前致谢。

Answer 1

具有 .hero class 的两个元素具有 position:absolute; 并与您的 <nav> 元素重叠。您可以通过删除这些元素来检查它。

我无法点击我的导航栏 HTML & CSS

I can't click on my navigation bar HTML & CSS

html

css

nav