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>

也链接到服务页面的“了解更多”按钮可以正常工作，但是我仍然无法单击导航栏，甚至服务页面也是如此。悬停效果也不起作用。

谢谢。

Answer 1

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

我无法单击导航栏HTML和CSS

1 个答案: