If you get a drop-down menu that’s being hidden behind some content, make sure that all elements surrounding the menu have overflow:visible set and that the menu’s z-index is larger than the elements it need to appear over.
E.g. I once worked on a site with markup like this…
<body class="page page-id-1263 page-child parent-pageid-1244 page-template page-template-default">
<div id="wrapper">
<div class="header-area">
<div class="center">
<div class="center-inner">
<div id="header">
<div class="area">
<h1 class="logo"><a href="http://the.site">The Site Name</a></h1>
<ul id="nav">
<li class="page_item page-item-1244 current_page_ancestor current_page_parent"><a href="http://the.site/about-2/" title="About Us">About Us</a>
<ul>
<li class="page_item page-item-1261"><a href="http://the.site/about-2/philosophy/" title="Philosophy">Philosophy</a></li>
<li class="page_item page-item-1254"><a href="http://the.site/about-2/practice-areas/" title="Practice Areas">Practice Areas</a></li>
</ul>
</li>
<li class="page_item page-item-1253"><a href="http://the.site/team/" title="Team">Team</a></li>
...
</ul>
</div>
<div id="slider02" class="text">
...
</div>
</div>
</div>
</div>
</div>
</div><!-- .header-area -->
<div id="main">
<div class="center">
<div class="center-inner">
...
The site had a working drop-down which disappeared under #main. Large z-indexes were already set on the menu in relation to #main. The fix was to add the following CSS…
.header-area { overflow: visible; }
#header { overflow: visible; }
