Question

我的导航栏无法点击除最后一项之外的任何项目。我已经检查过并关注youtube上的教程，但遗憾的是我检查的代码是一样的但是根本没有工作请有人有解决方案请分享给我。

这是我的HTML

<html>

<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">

<header>
<div class="row">
    <div class="logo">
    <img src = "Logo.png">
    </div>

    <ul class="main-nav">
        <li class = "active"><a href="Homepage.html"> Home </a></li>
        <li><a href="Promotion.html"> Promotion </a></li>
        <li><a href=""> Booking </a></li>
        <li><a href=""> SignIn </a></li>
        <li><a href=""> About </a></li>

    </ul>

</div>

<div class="title">
<h1>Ready for another adventure?</h1>
</div>

</header>

这是我的CSS。

*{
margin: 0;
padding: 0;

}

header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;

}

.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}

 .main-nav li{

display: inline-block;
}

 .main-nav li a{

color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}

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

.main-nav li a:hover {

border: 1px solid white;
}

.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}


.row{
max-width: 1200px;
margin: auto;
}

.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
 }

h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;

}

所以我错过了一些事情请告诉我谢谢你。

Answer 1

.title与菜单重叠。

您可以为菜单指定更高的z-index，以确保它位于最前面。

Information about z-index

下面的更新代码

＆＃13;

* {
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.main-nav {
  float: right;
  list-style: None;
  margin-top: 30px;
  /* added */
  position: relative;
  z-index: 100;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", Sans-serif;
  font-size: 15px;
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 150px;
  height: auto;
  margin-top: 10px;
  float: left;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.title {
  position: absolute;
  width: 1200px;
  margin-left: 0;
  margin-top: 0;
}

h1 {
  color: white;
  font-size: 60px;
  text-align: center;
  margin-top: 255px;
}

＆＃13;

<header>
  <div class="row">
    <div class="logo">
      <img src="Logo.png">
    </div>

    <ul class="main-nav">
      <li class="active"><a href="Homepage.html"> Home </a></li>
      <li><a href="Promotion.html"> Promotion </a></li>
      <li><a href=""> Booking </a></li>
      <li><a href=""> SignIn </a></li>
      <li><a href=""> About </a></li>

    </ul>

  </div>

  <div class="title">
    <h1>Ready for another adventure?</h1>
  </div>

</header>

＆＃13;

Answer 2

这是因为您没有在浮动元素父级上使用clearfix（如果您不使用clearfix，则会在所有浮动内容上发生类似问题）。将其添加到您的css文件中：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

并将clearfix添加到浮动元素的父级，在本例中为：

<div class="row clearfix">

我建议阅读这两篇文章（将来会派上用场）： https://css-tricks.com/all-about-floats/ https://css-tricks.com/snippets/css/clear-fix/

以防万一，这里是jsfiddle的链接，解决了您的问题：https://jsfiddle.net/mwgjycv4/1/

Html导航栏项只有最后一项可点击，其余项不能

2 个答案: