0

ウェブサイトにソーシャル メディア ボタン付きのドロップダウン メニューを作成しました。なんらかの理由で、ページが読み込まれると、メニューがデフォルトでその上にマウスを置いているかのように機能します。

たとえば、ページが読み込まれると、次のようになります。

デフォルトメニュー

そして、たとえば Facebook にカーソルを合わせると、次のように表示されます。

ホバリング

2 番目の部分は機能しますが、現時点でページの読み込みが完了すると、次のようになります。 現在のページが読み込まれました

メニューのコードは次のとおりです。私のウェブサイトは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 に答える