fdhfghdfgdfg
New Member
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="http://stackoverflow.com/">Logo</a></h1> <div id="navigation"> <ul> <li><a href="http://stackoverflow.com/questions/12740208/#">Home</a></li> <li> <a href="http://stackoverflow.com/questions/12740208/#">2012</a> <ul> <li><a href="http://stackoverflow.com/questions/12740208/#">January</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">February</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">March</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">April</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">May</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">June</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">July</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">August</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">September</a></li> <li><a href="http://stackoverflow.com/questions/12740208/#">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.