CODEWITHSUNDEEP
cssdrop-down-menu
Jongosi
Jongosi

Reputation: 2355

CSS Dropdown Menu, Child Exceed Parent Width

I'm trying to build a centrally-aligned dropdown menu, using HTML5 and CSS3. I could use jQuery to assist, if I must. This must work in IE8+. At the moment, my menu is centrally-aligned, and the drop-downs work, but the width of the dropped-down item (div) is the same width as the li above.

<div class="menu">
    <ul class="level0">
        <li class="level0">
            <a href=" http://domain.com/">
                <span>home</span>
            </a>
            <div class="sub">
                <div class="sub-column">
                    <a href="http://domain.com/customer-service">
                        <span>Customer Service</span>
                    </a>
                </div>
                <div class="sub-column">
                    <a href="http://domain.com/privacy-policy">
                        <span>Privacy Policy</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="level0">
            <a href=" http://domain.com/about">
                <span>About Us</span>
            </a>
            <div class="sub">
                <div class="sub-column">
                    <div>
                        <p>Blah blah blah, some random text goes here.</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

And the CSS (tried to compact it for easy viewing).

.menu {
    clear:both; display:block; max-width:100%; margin:0 auto; padding:0; 
    border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center;
}
.menu ul {
    display:block; max-width:100%; height:3.2em; margin:0 auto;
    padding:0; list-style-type:none; text-align:center;
}
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em; 
    line-height:3.2em; position:relative;
}
.menu ul li > div {display:none; visibility:hidden; position:absolute; 
    background:#f60; z-index:999; transition:display 0.25s ease;
}
.menu ul li:hover > div {display:inline-block; visibility:visible; 
    max-width:100%;
}
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%; 
    font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease;
}
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;}

.menu ul li.switcher {display:none;}

How can I get the width of the first line div (.menu ul li > div) to adopt the width of the grandparent element (.menu)? Or at least stretch to fit the contents in using max-width?

Any help is appreciated. Thanks.

~ edit ~

Here's the fiddle: http://jsfiddle.net/Xp6yG/

Upvotes: 0

Views: 3136

Answers (3)

Jongosi
Jongosi

Reputation: 2355

Thanks to some helpful suggestions, this is as close to working as I've got it: http://jsfiddle.net/Xp6yG/3/.

I changed the display on .menu ul li:hover > div to display:table; and added whitespace:nowrap; and right:50%; to the .menu ul li > div element.

The dropdown appears where I want it and stretches to fit the containing element(s). Thanks very much all!

Upvotes: 0

Andrew Real
Andrew Real

Reputation: 79

As well as using James suggestion of making the .menu position: relative I think you will also need to remove the position: relative on .menu ul li

Upvotes: 1

badAdviceGuy
badAdviceGuy

Reputation: 2090

I think I understand your issue correctly, try the following:

fiddle demo

CSS:

.sub {left:0px;}

Upvotes: 1

Related Questions