Question

I have a Nice CSS3 menu that works great however I am also incorporating a 1140px Grid System. The 1140px system has a class that looks like so:

.row {
 width: 100%;
 max-width: 1140px;
 min-width: 755px;
 margin: 0 auto;
 overflow: hidden;
}

The overflow: hidden; is preventing the menu drop down on the menu from working correctly. Here is the HTML of the menu:

<div class="row">
<div class="twelvecol logo">
<h1><a href="/">Logo</a></h1>

   <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>

    <li>
        <a href="#">2012</a>

        <ul>
            <li><a href="#">January</a></li>

            <li><a href="#">February</a></li>

            <li><a href="#">March</a></li>

            <li><a href="#">April</a></li>

            <li><a href="#">May</a></li>

            <li><a href="#">June</a></li>

            <li><a href="#">July</a></li>

            <li><a href="#">August</a></li>

            <li><a href="#">September</a></li>

             <li><a href="#">October</a></li>
        </ul>
    </li>
  <!-- MORE CODE --> 

I have attempted to override the overflow property by adding overflow: visible !important; but that breaks the page completely.

Can anyone help with a solution that will resolve the issue and show the menu properly without having to remove the 1140px Grid System?

Here is a jsFiddle I created.

Note: I do not mind using a solution that uses jQuery if that is what works.

Answer 1

Adding the following to the CSS solves the problem

#navigation ul
{
    position: absolute;
left: 500px;
min-width: 300px;
}

WORKING DEMO