如何使綠色欄上方導航CSS上浮

當我加載這個在我的瀏覽器，綠色條顯示，當我將鼠標懸停在一個導航鏈接，但我希望它是像一些類似於http // adworkmedia.com網站並且對懸停浮動綠色地址欄的地址欄下方的右上角。我的文字正好在文本上方移動。這是我的HTML & CSS代碼。此外，如果你能幫助我提高我的登錄表單的幾個像素，這將有助於呢！如何使綠色欄上方導航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; 
}

謝謝如果你能幫助我解決這個問題：DI是新來的CSS：P

來源

2017-07-22 Jarrod Estepp

檢查片段... –