title: CSS ignore overflow: hidden
body: <p>I'm working on the navigation for <strong><a href="http://bigballoon.businesscatalyst.com/" rel="noreferrer">this website</a></strong> and am having trouble with the dropdown nav.</p>
  
  <p>Basically, I have <code>overflow: hidden</code> applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.</p>
  
  <p>For <strong>Products</strong> there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.</p>
  
  <p>Is there a way to make the dropdown container within <code>div#navigation</code> ignore the <code>overflow: hidden</code> rule I have applied? I have tried setting <code>position</code> to <code>absolute</code> and playing with the <code>z-index</code>, but no luck.</p>
  
  <p>Any suggestions to achieve the same result are also welcome.</p>