0

我在我的网站上创建了一个带有社交媒体按钮的下拉菜单。它适用于除 Google+ 之外的所有人，由于某种原因，当页面加载时，菜单的行为就像我默认将鼠标悬停在它上面一样。

例如，当页面加载时，我希望它看起来像这样：

默认菜单

当我将鼠标悬停在 Facebook 上时，它应该是这样的：

悬停

第二部分有效，但目前，当页面完成加载时，它看起来像这样： 当前页面已加载

菜单代码如下，我的网站是http://www.rmartinez.co/谢谢！

<table style="margin-top:12px;margin-bottom:13px;margin-left: -5px;margin-right: auto;">
<tr>
<td>
<ul id="nav" class="drop">
  <li><a href="https://www.facebook.com/rmartinez93" target="_blank"><img alt="FB" border="0" height="60" width="60" src="http://i920.photobucket.com/albums/ad44/rubenrox1029/fb_zps6347bf28.png" 
onmouseover="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/fb2_zpsd4175471.png'" onmouseout="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/fb_zps6347bf28.png'"/></a>
    <ul>
      <li><div style="width:100px;vertical-align:top;*display:inline;"><div class="fb-like" data-href="http://www.rmartinez.co" data-send="false" data-layout="button_count" data-show-faces="false" data-font="segoe ui" data-colorscheme="dark"></div></div>
</li>
    </ul>
  </li>
</ul>
</td>
<td>
<ul id="nav" class="drop">
  <li><a href="http://www.twitter.com/staticint" target="_blank"><img alt="Twitter" border="0" height="60" width="60" src="http://i920.photobucket.com/albums/ad44/rubenrox1029/twitter_zps866fb15d.png" 
onmouseover="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/twitter2_zps2413b3a8.png'" onmouseout="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/twitter_zps866fb15d.png'"/></a>
    <ul>
      <li><div style="width:100px;vertical-align:top;*display:inline;"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.rmartinez.co" data-text="Ruben Martinez Jr. [Web-Surfer | Gadget-Lover | Tech-Aficionado]" data-via="staticint">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>
</li>
    </ul>
  </li>
</ul>
</td>
<td>
<ul id="nav" class="drop">
  <li><a href="https://plus.google.com/u/0/108135165162255920411/posts" target="_blank"><img height="60" width="60" alt="G+" border="0" src="http://i920.photobucket.com/albums/ad44/rubenrox1029/g_zps68bc2093.png" 
onmouseover="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/g2_zps4c82af5d.png'" onmouseout="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/g_zps68bc2093.png'"/></a>
    <ul>
      <li>
<div style="width:100px;vertical-align:top;*display:inline;"><div class="g-plusone" data-annotation="none" data-width="300" data-href="http://www.rmartinez.co" ></div></div>
      </li>
    </ul>
  </li>
</ul>
</td>
<td>
<ul id="nav" class="drop">
  <li><a href="http://www.linkedin.com/in/rmartinez93/" target="_blank"><img height="60" width="60" alt="LinkedIn" border="0" src="http://i920.photobucket.com/albums/ad44/rubenrox1029/in_zps0ded6f9d.png" 
onmouseover="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/in2_zps53277e88.png'" onmouseout="this.src='http://i920.photobucket.com/albums/ad44/rubenrox1029/in_zps0ded6f9d.png'"/></a>
    <ul>
      <li><div style="width:100px;vertical-align:top;*display:inline;"><script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="http://www.rmartinez.co"></script>
</div>
</li>
    </ul>
  </li>
</ul>
</td>
</tr>
</table>
4

1 回答 1

2

在 CSS 中的第 490 行，更改

ul.drop ul {
visibility:hidden; <!-- this needs to be changed
//your other stuff
}

到

ul.drop ul {
display:none;
}

并添加行

ul.drop:hover ul {
display:block;
}
于 2013-03-22T14:57:05.170 回答