（HTML）我的导航栏故障，并没有让我点击下拉项目

时间：2018-04-05 22:40:52

标签： html css navbar

当我将鼠标悬停在我的工具栏或导航栏项目之一上以点击子链接时，它会消失，然后才能点击其中一个。如何修复这个故障？我已经尝试过编辑我的CSS，html，以及搞乱填充。

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: green;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: -0.69px;
  /*works a little bit better*/
}

body {
  background-color: #BBBCC0;
  height: 1350px;
}

hr {
  border-color: black;
}

#homeB2_fig {
  left: 575px;
  text-align: center;
  text-indent: 0;
  margin: 0.5em;
  padding: 0.5em;
  overflow: hidden;
}

#homeB2_figCap {
  text-decoration: underline;
}

#mail {
  position: relative;
  left: 600px;
}

#facebook {
  position: relative;
  left: 535px;
}

#twitter {
  position: relative;
  left: 545px;
}

#donate {
  position: relative;
  top: -95px;
  left: 675px;
}

#calendarFig {
  overflow: hidden;
  position: relative;
  top: -400px;
  left: -400px;
  text-align: center;
  text-indent: 0;
  margin: 0.5em;
  padding: 0.5em;
}

#calendarFigCap {
  position: relative;
  top: -45px
}

#minnesotaFig {
  position: relative;
  top: -700px;
  left: 400px;
  text-align: center;
  text-indent: 0;
  margin: 0.5em;
  padding: 0.5em;
}

#minnesotaFigCap {
  position: relative;
  top: 7.5px;
  text-decoration: underline;
}

#Heading_home {
  text-decoration: underline;
  text-align: center;
  position: relative;
  top: -175px;
}

#home_para {
  width: 60%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: -130px;
  font-size: 15pt;
  font-family: serif;
}

#logoLeft {
  position: relative;
  top: -5px;
  left: -109px;
}

#logoRight {
  position: relative;
  top: -5px;
  left: 834px;
}

#otherChapters_p {
  text-align: center;
  width: 20%;
  position: relative;
  left: 600px;
  top: -10px;
  font-size: 10pt;
}

#calendar {
  position: relative;
  left: 200px;
  top: -400px;
}

#minessota {
  position: relative;
  left: 750px;
  top: -450px;
}

#minnesotaP {
  text-align: center;
  width: 20%;
  position: relative;
  left: 600px;
  top: 5px;
  font-size: 10pt;
}

#second {
  position: relative;
  top: -700px;
}

#contactUsHeader {
  position: relative;
  top: -680px;
  left: 490px;
}

#contactUs {
  position: relative;
  top: -680px;
  left: 465px;
}

#hoursHeader {
  position: relative;
  top: -960px;
  left: 900px;
}

#hours {
  position: relative;
  top: -960px;
  left: 880px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="rtsnp_home.css">
  <link rel="stylesheet" type="text/css" href="rtsnp_navBar.css">
  <title>Home</title>
</head>

<body>
  <div class="navbar">
    <a href="rtsnp_home.html">Home</a>
    <div class="dropdown">
      <button class="dropbtn">About Us
              <i class="fa fa-caret-down"></i>
          </button>
      <div class="dropdown-content">
        <a href="rtsnp_missionStatement.html">Mission Statement</a>
        <a href="ourFounder.html">Our Founder</a>
        <a href="#">Our Board of Directors</a>
        <a href="#">National Board of Directors</a>
        <a href="#">Programs Offered</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Our Athletes
              <i class="fa fa-caret-down"></i>
            </button>
      <div class="dropdown-content">
        <a href="#">Ring of Honor</a>
      </div>
    </div>
  </div>
  <img id="logoLeft" src="icon.png" alt="rtsnp logo" style="width: 375px; height: 200px;">
  <img id="logoRight" src="iconFlip.png" alt="rtsnp logo" style="wdith: 375px; height: 200px;">
  <h1 id="Heading_home">Rolling Thunder Special Needs Program</h1>
  <p id="home_para">Rolling Thunder Special Needs Program is one of the first inclusive running clubs in the USA for all athletes. Founded in 1998 by Steve Cuomo, the Rolling Thunder Special Needs Program (RTSNP) is a one of a kind nonprofit (501c3) organization dedicated
    to providing challenged individuals with the opportunity to successfully participate in all levels of mainstream running, walking, or wheelchair racing. We are a member of Long Island Track and Field, and its parent organization, USA Track and Field.<br><br>What
    else makes Rolling Thunder unique? The entire family can exercise and improve their physical fitness at the same time in the same place! Several families are members of Rolling Thunder Special Needs Program. Parents and siblings of challenged individuals
    become acquainted, share experiences, and may become great friends. Check out our About Us page to learn more.</p>

  <a type=href="https://www.paypal.com/donate/?token=1RuxEJjfaRGzVXtVa3yehGsV-2X04iefjn1KGd-CuSrPpFyT8iEvC3ZhJKep5RNzJeBxlW&country.x=US&locale.x=US">
    <input id="donate" type="image" src="donate.gif" value="go donate">
  </a>
  <a href="https://www.facebook.com/Rolling-Thunder-Special-Needs-Program-RTSNP-123816781047514/?fref=ts">
    <input id="facebook" type="image" src="facebook.png" value="go to facebook">
  </a>
  <a href="https://twitter.com/rtsnp">
    <input id="twitter" type="image" src="twitter.png" value="go to twitter">
  </a>
  <hr>
  <figure id="homeB2_fig">
    <img src="homeB2.jpg" alt="RED" width="304" height="228">
    <figcaption id="homeB2_figCap">Rolling Thunder Chapters</figcaption>
  </figure>
  <p id="otherChapters_p">Chapters of the Rolling Thunder Special Needs Program are developing across the USA. If you would like to start a Rolling Thunder Chapter, please contact the Founder, President and Head Coach Steve Cuomo at (631)-399-5564.</p>
  <figure id="calendarFig">
    <img src="calendar_2.0.png" alt="LEFT" width="300" height="300">
    <figcaption id="calendarFigCap">Checkout Our New York Calendar</figcaption>
  </figure>
  <figure id="minnesotaFig">
    <img src="minnesota_2.0.png" alt="LEFT" width="200" height="200">
    <figcaption id="minnesotaFigCap">Welcome Our Newest Rolling Thunder Chapter: Minnesota!</figcaption>
    <p id="minnesotaP">Rolling Thunder adopted Minnesota as it’s newest chapter as it was much need. There are well over 7 Athletes to this new chapter and well over 10 coaches and volunteers. If you would like to get involved with the Rolling Thunder Minnesota Chapter
      please contact President Claire Braun at (763)-742-3286</p>
  </figure>
  <hr id="second">
  <h3 id="contactUsHeader">Contact Us</h3>
  <p id="contactUs">Rolling Thunder Special Needs Program Inc.<br> National Headquarters <br>Beth Cuomo <br> 49 Lombardy Drive <br>Shirley, New York 11967<br> USA <br><br><br>Steve Cuomo <br>Founder, President & Head Coach<br>Cell: (631)-399-5564 <br>Email: nyinfo@rtsnp.org</p>
  <h3 id="hoursHeader">Business Hours</h3>
  <p id="hours">Monday - Thursday | 8:00 AM ET - 6:00 PM ET <br>Friday - Saturday | 8:00 AM ET - 5:00 PM ET </p>
</body>

</html>

0 个答案:

没有答案
相关问题
最新问题