1

背景：我在标题横幅中的导航下拉菜单工作得很好，直到我在标题横幅空间附近放置了一个 facebook 登录按钮。现在我已经这样做了，我的导航不起作用或样式。我确定我犯了一些基本的错误或疏忽，但我不太明白为什么这两个元素会像这样协同工作 - 如果有人能对此有所了解，我会非常感激欣赏它：

<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>
4

1 回答 1

1

<ul id=navigation">缺少引号。

于 2012-04-11T16:02:48.477 回答