アンカータグがナビゲーションバーで機能していない

Question

私のul要素のアンカータグは機能しません。つまり、実際のサイト上にカーソルを置いてクリックすると何も起こりません。最後の要素が動作しますが（ "Contact"）、それが動作するのは唯一のものです。私はまた、他のaタグをウェブサイトに持っていて、それ以外のものはulで動作します。私はメイン-NAVにfloat: rightコマンドを削除した場合、それは動作しますが、それが正しい場所にはありませんが、

* { 
    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; 
} 

：

<!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：

は、ここに私のHTMLです。

Answer 1

クラスheroはabsoluteの位置にあり、h1タグの内側にはmaring-topの210pxがあります。これにより、ヒーローのdivがボタンの上に重ねて表示され、クリックできなくなります。

あなたのブラウザのdevtoolsについて知ることは、本当に強力なデバッグツールです。

ヒーローは絶対的な要素なので、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にあり、CSSに必要なホバーイベントが出ません。

私は、右クリックして "inspect element"を使い始めるといつでもアドバイスを受けます。次回はあなた自身でそれを見るでしょう。

あなたは "位置：絶対"を削除することができ、その後動作します。