Question

悬停时我的绿色栏杆没有像http://adworkmedia.com那样升到标题顶部（将鼠标悬停在其顶部导航栏上，然后将鼠标悬停在我的https://affattraction.com上）。我的代码如下：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Site Description">
    <meta name="keywords" content="Site Keywords">
    <title>AffAttraction | Performance Based Marketing Network</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/showcase.js"></script>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1>AffAttraction</h1>
        </div>
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="advertisers.html">Advertisers</a></li>
            <li><a href="publishers.html">Publishers</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </nav>
        <div id="login">
        <form action="publishers/login.php" method="post">
          <input type="email" name="email" placeholder="Email" required>
          <input type="password" name="password" placeholder="Password" required>
          <button type="submit" class="header_login_btn">Login</button>
        </form>
        </div>
      </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1><span class="highlight">Performance</span> Based Marketing</h1>
        <p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
      </div>
    </section>

  </body>
</html>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: : 1.5;
  margin: 0;
  padding: 0;
  background-color: #F4F4F4;
}

/* Global */
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}

.header_login_btn {
  color: #FFFFFF;
  background-color: #00CF03;
  width: 70px;
  height: 35px;
  margin-top: 10px;
  border: #00CF03 2px solid;
  border-radius: 2px;
}

.header_login_btn:hover {
  color: #FFFFFF;
  background-color: #42DB4C;
  width: 70px;
  height: 35px;
  margin-top: 10px;
  border: #42DB4C 2px solid;
  border-radius: 2px;
}

/* Header */
 header {
   color: #FFFFFF;
   background-color: #418DD9;
   padding-top: 15px;
   min-height: 50px;
   position: relative;
 }

 header a {
   color: #FFFFFF;
   text-decoration: none;
   font-size: 16px;
 }

header li {
  float: left;
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
}

header #branding {
  float: left;
  font-weight: bold;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: center;
  padding-top: 10px;
}

header a:hover {
  border-top: #42DB4C 3px solid;
}

header #login {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -22.25px;
}

header #login input {
  height: 23px;
  width: 110px;
  border: #FFFFFF;
  border-radius: 3px;
  padding: 5px;
  float: none;

}

/* Showcase */
#showcase {
  color: #FFFFFF;
  min-height: 500px;
  background: url('../img/cover.jpg') no-repeat;
  text-align: center;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 50px;
  font-weight: bold;
}

#showcase p {
  font-size: 30px;
}

#showcase .highlight {
  color: #42DB4C;
}

Answer 1

您需要进行一些更改。首先，您需要从padding-top和header_nav中移除header。您希望border-top显示在最顶部，但header nav和header上的填充不允许它。请尝试将填充添加到单个li。

您还需要手动设置某些元素的高度，以便li可以扩展到足以在顶部显示border-top。因此，为min-height和container设置nav-ul为50px。最后，将header li a元素设置为display: inline-block并为其提供一些padding-top。

如何在导航链接上方提高绿色条

1 个答案: