Conflicting CSS Overflow Property - How to Fix?

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.

Ashwin Singh · Accepted Answer · 2012-10-05 06:05:06Z

2

Adding the following to the CSS solves the problem

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

WORKING DEMO

answered Oct 5, 2012 at 6:05

Ashwin Singh

7,3855 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Afshin · Accepted Answer · 2012-10-05 06:25:17Z

1

#navigation ul{
  position:absolute;
 right:0;
}
#navigation li ul{
 width:110px;
 }

answered Oct 5, 2012 at 6:25

Afshin

4,2253 gold badges28 silver badges35 bronze badges

Comments

Loïc bcn · Accepted Answer · 2012-10-05 06:06:40Z

0

Try to add a new class at your container:

<div class="row notoverflow">

in your css:

.row.notoverflow{overflow:auto}

and at the end of your container

<div class="row notoverflow">. . .
    <div style="clear:both"></div>
</div>

Without the overflow:hidden property, the container height wouldn't increase with his content ... The other way to do that is to clear the floats.

edited Oct 5, 2012 at 6:06

answered Oct 5, 2012 at 5:56

Loïc bcn

1545 bronze badges

2 Comments

L84 Over a year ago

That does not work. That causes scroll bars to appear when the menu is hovered over.

Loïc bcn Over a year ago

I gave you an alternative way to the overflow:hidden in your .row ... The problem is in your menu ... he's pushing the content, you must give it a position:absolute

kelly johnson · Accepted Answer · 2012-10-05 06:17:36Z

0

You could also remove the entire Nav div from within the containing div so that it comes first in the document flow....as in above

answered Oct 5, 2012 at 6:17

kelly johnson

1,6363 gold badges17 silver badges27 bronze badges

Collectives™ on Stack Overflow

Conflicting CSS Overflow Property - How to Fix?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related