'm trying to have a header dropdown menu that shows all my social buttons upon hovering. The dropdown menu is made with CSS with no jquery and I encountered a problem in Firefox and IE.
The submenus (the hovering dropdown menu) css is something like this:
#socialzz ul ul
{
display:none;
}
and on hover, it goes:
#socialzz ul li:hover > ul
{
display:block;
}
All is good under Chrome, the menu shows all 3 social networks buttons, loads them properly etc. In FF and IE, once I hover, only the Facebook button actually works, Twitter isn't displayed at all and the G+ follow button is loaded strange. I isolated the issue and it seems the "display:none;" css rule is messing those up. If you refresh the page with the mouse over the menu (always visible), it loads them properly.
Now, I'm not sure how to bypass this issue without actually using jquerry. I tried using opacity:0 and 1 respectively on hover, with no luck.
The site is PocketMeta and you can check this problem in the site's header.
Any ideas?