facebookログインボタンレイヤリングはヘッダバーのドロップダウンメニューを停止します

Question

背景：ヘッダーバナースペース内のFacebookログインボタンを近くに配置するまで、ヘッダーバナーの私のnavドロップダウンメニューはうまくいきました。私はこれをやったので、私のnavは機能しないし、スタイルも変わっていません。私はいくつかの基本的なエラーや見落としをしていると確信していますが、なぜこの2つの要素がこのように並んで動作しているのか分かりません。それを感謝：

<div id="header"> 
<div class="headercontainer"> 

<ul id=navigation"> 

<li><a href="/about/" class="nav">About<span></span></a> 
    <ul> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Team</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Terms of Service</a></li> 
    <li><a href="#">Privacy Policy</a></li> 
    <li><a href="#">Intellectual Property Notice</a></li> 
    </ul> 
</li> 

</ul> <!--end Navigation--> 

</div><!-- end headercontainer--> 
    </div> <!-- end header --> 

<div id="login"> 
<div class="fb-login-button" scope="email">Login with Facebook</div> 
</div> 

CSS：

#header {position: relative; top: 0; right: 0; left: 0; height: 44px; background-color: #3B3B3B;} 

.headercontainer li {position: relative; display: inline; font-size: 1.1em;} 
.headercontainer .nav {position: relative; top: 15px; left: 420px; display: inline-block; color: #FFF;} 
.headercontainer .nav span {position: absolute;} 
.headercontainer li:hover .nav {color: #FF2A2A;} 

.headercontainer li ul {position: relative; display: none; width: 100px; left: 880px; z-index: 108; background-color: #fff; border-top: 1px solid #cccaca; box-shadow: 0 0 2px 2px #888; -moz-box-shadow: 0 0 2px 2px #888; -webkit-box-shadow: 0 0 2px 2px #888;} 
.headercontainer li:hover ul {display: block;} 
.headercontainer li ul li:first-child a {padding-top: 10px;} 
.headercontainer li ul li:last-child a {padding-bottom: 10px;} 
.headercontainer li ul a {display: block; padding: 5px; text-align: left; font-weight: normal; color: #0b0808;} 
.headercontainer li ul a:hover {color: #cb0000; text-decoration: none; background-color: #e1dfdf;} 
.headercontainer li ul a:active {color: #fff; background-color: #FF2A2A;} 

#login .fb-login-button {position: relative; margin-top: -31px; left: 315px;} 

/* ==== NAV BAR ==== */

#navigation {position: relative; float: right; z-index: 110;} 
#navigation ul {z-index: 108; top: 28px; left: -10px;} 
#navigation .nav {height: 28px; padding: 14px 8px 0 8px;} 
#navigation .nav span {top: 28px; right: 4px; width: 8px; height: 6px;} 
#navigation li:hover .nav {text-decoration: none; text-shadow: 0 1px rgba(255,255,255,0.3); background-color: #e1dfdf;} 
#navigation li:active .nav {color: #fff; text-shadow: 0 -1px rgba(34,25,25,0.3); background-color: #ff2a2a;}` 

スクリプト：

<script> window.fbAsyncInit = function() { 
     FB.init({ 
     appId  : '...', 
     status  : true, 
     cookie  : true, 
     xfbml  : true, 
     oauth  : true, 
     }); 
    }; 
    (function(d){ 
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     d.getElementsByTagName('head')[0].appendChild(js); 
    }(document)); 
    </script> 

Answer 1

<ul id=navigation">には引用符がありません。