我正在尝试构建一个CSS菜单。它适用于文本和锚点链接，但我使用相同的CSS作为下拉菜单与社交媒体，如按钮（Facebook，Twitter，等）一切都很好，除了IE9！我发誓这个浏览器将是我的死！我看过它看起来像：悬停是我需要的问题，鼠标悬停或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 */
}