Why isn't my "menu" displaying properly? - list

Question

I used a layout similar to a menu how it has the main menu and a submenu that appears when you hover over it. In this case, I'm trying to have a "Share" menu with the icons the submenu on the same line. I picked details from http://cssdeck.com/labs/another-simple-css3-dropdown-menu Why isn't my menu hiding/showing properly?
HTML
a {
padding: 4px;
}
i.fa {
color: #8b8b8b;
}
ul {
list-style-type: none;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
padding: 0;
visibility: hidden;
}
ul li ul:hover {
display: block;
}
ul li ul li {
display: inline-block;
}
<ul>
<li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-pinterest"></i>
</li>
</ul>
</li>
</ul>

Answer 1

I ran your code on a separated file, and i detected that your mistake was in the html. I supposed that you want to create on hover effect on the Share, and then show the social networks.. Here's the code of the HTML properly coded.
<ul>
<li>
<a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<li>
<i class="fa fa-facebook"></i>Facebook
</li>
<li>
<i class="fa fa-twitter"></i>Twitter
</li>
<li>
<i class="fa fa-pinterest"></i>Pinterest
</li>
</ul>
</li>
</ul>

Answer 2

The reason the menu isn't appearing is because the menu <ul> which you are trying to show has visibility: hidden, and that property is not being changed on hover. Since that element already has display: none set (which does get set to block on hover), you can remove the visibility property.
I see that the code in your link has visibility: hidden set but also sets it to visible on hover. This would also correct the problem, but I don't see any reason to have visibility at all on this.
Also, in your particular example, you need some content in the menu <li>s to actually see that it's being shown. See the updated snippet below.
a {
padding: 4px;
}
i.fa {
color: #8b8b8b;
}
ul {
list-style-type: none;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
padding: 0;
/*visibility: hidden;*/ /* Not needed, since there is already display:none*/
}
ul li ul:hover {
display: block;
}
ul li ul li {
display: inline-block;
}
<ul>
<li style="color: #676767;"> <a style="color: #676767;" href="#"><i class="fa fa-share-alt"></i> Share</a>
<ul class="socialShare">
<!-- Need some content in the <li>s -->
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-facebook">
link a
</i></a></li>
<li><a href="https://twitter.com/home?status=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/"><i class="fa fa-twitter">
link b
</i></a></li>
<li><a href="https://pinterest.com/pin/create/button/?url=http://test.gpjbaker.com/brands/gp-j-baker/denbury-collection/&media=&description="><i class="fa fa-pinterest">
link c
</i></a></li>
</ul>
</li>
</ul>