CODEWITHSUNDEEP
htmlcss
Dmitry Belaventsev
Dmitry Belaventsev

Reputation: 6657

Absolute positioned ul stratch parent div

I look at example of dropdown menu here. Here is simplified jsfiddle example. I want to build my own styled HTML element base on it. All it's ok. But in my implementation I need to wrap <ul class="dropdown">...</ul> with div styled with the CSS like this:

border: 2px solid green;
overflow: auto;

And in this case the ul with submenu stratch this div (as I understand) and that's why the scrollbars appeared. Here is simplified jsfiddle example.

But if use the following css for outer div - all is ok:

border: 2px solid green;
height: 35px;

Here is jsfiddle example.

Could you help me to understand - why I have problems with "overflow:auto" case?

TIA!

Upvotes: 1

Views: 91

Answers (3)

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

#killer{
border: 2px solid red;
overflow: visible;
}

<div id="killer">
<ul class="dropdown">
    <li><a href="./" class="dir">Menu</a>
        <ul>
            <li><a href="/js/">JavaScript</a></li>
            <li><a href="/photoshop/">Photoshop</a></li>
            <li><a href="/design/">Design</a></li>
            <li><a href="/misc/">Other</a></li>
        </ul>
    </li>
</ul>
<div style="clear:both;"></div>
</div>​

Upvotes: 1

safrazik
safrazik

Reputation: 1601

It's because the <ul> within the <ul> (the submenu) ul.dropdown ul has style visibility:hidden if you removed that rule and add display:none - you won't see the scroll bars because, visibility:hidden preserves the width and height of the element and hides the element, while display:none is like removing the element from DOM. Hope this helped you

Upvotes: 1

rgthree
rgthree

Reputation: 7273

You don't want to give the container an overflow that is not visible, since that will hide your drop-down. Further, there's a lot of floating going on, that can now be inline-block with IE8+ support.

I forked your Jsfiddle and applied the CSS fixes at the bottom of the CSS Section. Is this what you're looking for: http://jsfiddle.net/rgthree/VFZRB/

Upvotes: 1

Related Questions