Drop-Down Menu Loads as-if Hovered by Default - html

Question

I created a drop-down menu on my website with social media buttons. It works great for all of them except Google+, which for some reason, when the page loads, the menu acts as if I am hovering over it by default.
For example, when the page loads, I want it to look like this:
And when I hover over, say, Facebook, it should look like this:
The second part works, but at the moment, when the page finishes loading, it looks like this:
The code for the menu is below, and my website is http://www.rmartinez.co/ Thank you!
<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;">Tweet
<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>

Answer 1

On line 490 in your CSS, change
ul.drop ul {
visibility:hidden; <!-- this needs to be changed
//your other stuff
}
to
ul.drop ul {
display:none;
}
And add the line
ul.drop:hover ul {
display:block;
}