锚标签在导航栏中不起作用

Question

我所有 ul 元素的定位标签都不起作用，这意味着当我在实际网站上将鼠标悬停在它们上方时，它们不会点击，也没有任何反应。最后一个元素有效 ("Contact") 但这是唯一有效的元素。我在网站上还有其他 a 标签，它们在 ul.

上有效。

这是我的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="footer, address, phone, icons" />

    <title>Ask Uptown</title>
    <link rel="stylesheet" href="pp.css">
    <link href="https://fonts.googleapis.com/css?family=Abel|Raleway|Signika|Signika+Negative" rel="stylesheet">
  <body>
    <header>
      <div class="row">
        <div class="logo">
          <h3 class="logo-text">Uptown<span>Ask</span></h3>
        </div>

        <ul id="main-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Stuck? Ask a question!</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Sign up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>

      <div class="hero">
        <h1>Start Asking now</h1>

        <div class="buttons">
          <a href="#" class="btn btn-one">Ask Now!</a>
          <a href="#" class="btn btn-two">Sign Up Now!</a>
        </div>

      </div>

    </header>
    <section>
      <div class="about">
        <h1>How Uptown Ask works?</h1>
        <p class="paragraph-about">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </section>
    <section>
      <div class="section">
        <div class="card-pic">
          <h4>Ask A Question</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-two">
          <h4>Get An Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-pic-three">
          <h4>Use The Answer</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </section>


            <footer class="footer-distributed">

                <div class="footer-left">

                    <h3>Uptown<span>Ask</span></h3>

                    <p class="footer-links">
                        <a href="#">Home</a>
                        ·
                        <a href="#">Blog</a>
                        ·
                        <a href="#">About</a>
                        ·
                        <a href="#">Contact</a>
                    </p>

                    <p class="footer-company-name">Ask Uptown &copy; 2017</p>
                </div>

                <div class="footer-center">

                    <div class="adress-sec">
                        <p class="p-adress">Address: Tripoli Street, Algeria Road, Mirdif Area - Dubai, United Arab Emirtes</p>
                    </div>

                    <div class="phone-sec">
                        <p>Phone: 04 251 5001</p>
                    </div>

                    <div class="email-sec">
                        <p class="p-email"><a href="mailto:rayanza3eem1234@gmail.com">Email: Uptownschool@gmail.com</a></p>
                    </div>

                </div>

                <div class="footer-right">

                    <p class="footer-company-about">
                        <span>About the company</span>
                        Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
                    </p>

                    <div class="icons">

                        <a href="https://www.twitter.com" target="_blank"><img src="twitter.png" alt="Twitter" class="twitter" ></a>
                        <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" alt="Facebook" class="facebook" ></a>
                        <a href="https://www.instagram.com" target="_blank"><img src="insta.png" alt="Instagram" class="instagram" ></a>

                    </div>

                </div>

            </footer>

  </body>
</html>
code here

还有我的 CSS:

* {
  margin: 0;
  padding: 0;
}

header {
  background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(uptown.jpg);
  height: 65vh;
  background-size: cover;
  background-position: center;
}


.logo img{
  width: 190px;
  height: 65px;
  float: left;
  margin-top: 18px;
}

body{
  font-family: 'Abel', sans-serif;
}

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

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

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-top: 210px;
  margin-left: 55px;
}

.buttons{
  margin-top: 15px;
  margin-left: 490px;
}

.btn{
  border: 1px solid white;
  padding: 10px 30px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
}

.buttons a:hover{
  background-color: #cdc9c9;
  transition: all 0.5s ease-in;
}

.about{
  width: 100%;
  height: 300px;
  color: #F4F7F8;
}
.about h1{
  color: black;
  margin-top: 60px;
  margin-left: 2px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: 500;
  font-size: 35px;
}

.paragraph-about{
  color:black;
  font-family: 'Signika Negative', sans-serif;
  margin-left: 70px;
  margin-right: 60px;
  margin-top: 30px;
}

.section{
  width: 100%;
  height: 350px;
  background-color: #F4F7F8;
}


.card-pic{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 60px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}

.card-pic h4 {
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}


.card-pic-two{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 485px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-two h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-two p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

.card-pic-three{
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 900px;
  top: 870px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px;
}
.card-pic-three h4{
  text-align: center;
  font-size: 25px;
  margin-top: 20px;
}

.card-pic-three p{
  text-align: center;
  margin-left: 20px;
  margin-right: 12px;
}

#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: 'Signika', sans-serif;
  font-size: 19px;
}

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

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

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
    width: 40%;
}

/* The company logo */

.footer-distributed h3{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}

.footer-distributed h3 span{
    color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
    width: 35%;
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
    width: 20%;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}

.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }

}

.twitter{
  width: 42px;
  height: 42px;
}


.facebook{
  width: 42px;
  height: 42px;
}

.instagram {
  width: 40px;
  height: 40px;
}

.icons{
  margin-top: 20px;
}


.adress{
  width: 30px;
  height: 30px;
  margin-right: 40px;
}

.email{
  width: 40px;
  height: 40px;
}

.phone{
  width: 20px;
  height: 20px;
}

.adress-sec{
  margin-bottom: 25px;
}

.phone-sec{
  margin-bottom: 20px;
}

.logo-text{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
    margin-top: 12px;
    float: left;
}

.logo-text span{
  color: #5383d3;
}

如果我删除主导航上的 float: right 命令，它可以工作，但它不在正确的位置。

Answer 1

你的class hero 的位置是absolute，里面的h1 标签的maring-top 是210px。这使得英雄 div 覆盖按钮，从而使它们不可点击。

一个小技巧是了解浏览器的开发工具，它是一个非常强大的调试工具。

因为英雄是绝对元素，所以使用css property top而不是margin-top。这不会影响其他元素。查看您的开发者控制台：

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

h1{
  color: white;
  font-size: 40px;
  text-align: center;
  margin-left: 55px;
}

有保证金带顶

Answer 2

我认为您的问题始于 css 文件的这一部分：

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

你定义了 hero div 来覆盖 li，所以你不能将鼠标悬停在它们上面 anymore.whenever 你将鼠标放在它们上面它在 .hero div 上并且不发出悬停CSS.

需要活动

我的建议是，每当遇到这种情况时，请右键单击并开始使用 "inspect element"。下次你自己看。

您可以删除 "position:absolute"，然后它将起作用。

锚标签在导航栏中不起作用

Anchor tags are not working in navigation bar

html

javascript

css

anchor

jquery