CODEWITHSUNDEEP
cssoverflow
Xtian
Xtian

Reputation: 3587

CSS: Why does is this breaking when i take Overflow:hidden out?

So in the class nav, when i have overflow:hidden in there is centers and works well, but i can't use overflow:hidden because it will hide my drop downs in the navigation.

But when i take it out, it breaks it? What else can I use other than overflow:hidden to keep it looking right, and not hide my navigation?

http://jsfiddle.net/xtian/svr8C/1/

Upvotes: 0

Views: 240

Answers (4)

Aniket
Aniket

Reputation: 9758

You can user something of this sort.

HTML:

<ul class="menu">
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a>
        <ul class="submenu">
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
</ul>

CSS:

.menu li {
    display: inline-block;
}

.menu li a {
    color: #fff;
    background: orangered;
    text-decoration: none;
    padding: 0.5em;
    border-bottom: 5px solid #000;
}

.menu li .submenu {
    display: none;
}

.menu li:hover > .submenu {
    display: block;
    position: absolute;
    top: 30px;
}

.menu li .submenu li {
    display: block;
    margin-top: 20px;
}

Here is the demo

Upvotes: 0

Ola Tuvesson
Ola Tuvesson

Reputation: 5201

Try overflow: auto; - this will clear the float similarly to overflow: hidden; but may introduce scrollbars instead if you're not careful. Alternatively you can try a "float all" approach: a floated element inside another floated element also forces float clearing.

Upvotes: 0

Andreas K&#246;berle
Andreas K&#246;berle

Reputation: 110922

Its cause the overlfow hidden clear all the float and gives the element the height of the floating li. The solution is this: http://jsfiddle.net/svr8C/11/

This statement:

.nav:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}

adds an invisible element after the lis and clear them. Its taken from the famous oocss media element: https://github.com/stubbornella/oocss/blob/master/core/media/media.css

Upvotes: 1

janhartmann
janhartmann

Reputation: 15003

Just set the height (35px?) of .nav and remove the overflow: hidden;

Upvotes: 1

Related Questions