1

我有一个我正在尝试构建的 CSS 菜单。它适用于文本和锚链接，但我将相同的 CSS 用于带有社交媒体（如按钮）（facebook、twitter 等）的下拉菜单，除了 IE9 之外，一切都很好！我发誓这个浏览器将是我的死亡！我读过它看起来像 :hover 是我需要鼠标悬停或 JS 的问题！我在这方面的专业知识有限，我不知道该怎么做。

这是 HTML

<ul id="nav">
<li>Share This Page
    <ul>
        <li>
                    <div id="social_body">
                       <div id="social_left">
                         <g:plusone size="tall"></g:plusone>
                       </div>
                       <div id="social_right">
                         <div class="fb-like" data-send="false" data-layout="box_count"     
                        data-width="55" data-show-faces="true"></div>
                       </div>
                     </div> 
                </li>
        <li>
                    <div id="social_body">
                      <div id="social_left">
                          <a href="https://twitter.com/share" class="twitter-share-
                             button" data-count="vertical">Tweet</a>
                             <script>!function(d,s,id){var                                  
                             js,fjs=d.getElementsByTagName(s)                                 
                             [0];if(!d.getElementById(id))
                             {js=d.createElement(s);js.id=id;js.src="
                             //platform.twitter.com/widgets.js";
                             fjs.parentNode.insertBefore(js,fjs);}}
                             (document,"script","twitter-wjs");</script>
                      </div>
                      <div id="social_right">
                         <script src="//platform.linkedin.com/in.js" 
                             type="text/javascript"></script>
                             <script type="IN/Share" data-counter="top"></script>
                      </div>
                    </div>
                 </li>
                 <li><div id="share_footer"><a href="http://www.brandonturpin.com" 
                             target="_blank">Zen Cart Module</a> by Brandon Turpin</div>
                 </li>
    </ul>
        </li>
            </ul>

这是CSS

/*------------------------------------*\
    RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,th,var{
    font-style:normal;
    font-weight:normal;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}


/*------------------------------------*\
    DROPDOWN
\*------------------------------------*/

#nav{   color: #1e598e;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    text-align: center;
    margin-right:10px;
    position:relative;
}


/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0.8); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
        height:auto; 
        padding-left: 5px; 
        padding-top: 10px; 
        padding-bottom: 5px; 
        padding-right: 5px; 
        border: 2px solid #e3e3e3;
        width: 14em;
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}

我有点失落！！当IE9

4

0 回答 0