Question

当我在浏览器中加载时，当我将鼠标悬停在导航链接上时会显示绿色条，但我希望它像http // adworkmedia.com这样的网站，并将绿色条悬停在顶部就在地址栏下方。我的徘徊在文本上。这是我的HTML＆amp; CSS代码。此外，如果你可以帮助我提高我的登录表单几个像素也将有所帮助！

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">
  </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>
          </ul>
        </nav>
        <div id="header-login">
          <form action="publishers/login.php" method="post">
            <input type="email" name="email" placeholder="Email">
            <input type="password" name="password" placeholder="Password">
            <button type="submit" class="btn_1">Login</button>
          </form>
        </div>
      </div>
    </header>

  </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 */
 header {
   color: #FFFFFF;
   background-color: #418DD9;
   padding-top: 15px;
   min-height: 50px;
 }

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

header #branding h1 {
  margin: 0;
}

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

header a:hover {
  border-top: #00FF1E 3px solid;
}

#header-login {
  float: right;
}

#header-login input {
  height: 25px;
  width: 112px;
  float: none;
}

谢谢你能帮助我解决这个问题：D我是CSS新手：P

Answer 1

可以通过在菜单的包含元素上使用border来实现此效果。基本上，在悬停时，您可以使用指定的border-width, border-style and border-color创建border-top，或者使用缩短的border: border-width border-style border-color指定所有这些内容。

这是工作小提琴：https://jsfiddle.net/5av9mhrk/

如何使导航上方的绿色条在CSS中浮动

1 个答案: