Overflow:auto/hidden to clear a dropdown menu?

I really like Paul O’B’s method for clearing floats; using the OVERFLOW property is really clean, elegant and cross browser friendly. Still I get stumped when it comes to applying it to some common usages, drop-down menus, for example.

Take a look at this sample menu code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style type="text/css">
ul { margin:0; padding:0; list-style:none }
li a { display:block;}
#nav{background:silver; width:100%; overflow:hidden}
#nav li{ float:left;position:relative; padding:10px;}
#nav li li { float:none;}
#nav li li:hover {background:brown;}
#nav ul{ position:absolute; display:none; top:100%; left:0%; width:10em;}
#nav li:hover ul{ display:block; background:orange}
#nav li:hover {background:orange;}

/*#nav:after{ display:block; content:""; height:0; clear:both;}*/
</style>
</head>

<body>
<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
     </ul>
	</li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

when you hover over the about button, you should be able to see a drop down menu appear; it doesn’t because #nav has overflow:hidden. ( in fact any container with the overflow property of hidden or auto will hide the drop-down menu IF it expands past the containers dimensions).
I already know that I could 1) use a clearing element ( yuck), 2) use :after{} even thought it would give some issues with IE, or 3) float #nav and give it a width… let’s say 100% and then give the next element after a clear:both.

#3 would be my choice, but i liek to keep the nav in the regular flow, if I can. Which is why I would like to know if overflow:auto/hidden just cant be used for this… or if I missed something.

when you hover over the about button, you should be able to see a drop down menu appear; it doesn’t because #nav has overflow:hidden

Technically, this is not the reason why the sub menu is clipped. If the sub menu does not show it is because the list items are styled with “position:relative”, which establishes a containing block.

This article may explain the issue better (it also lists a clearfix method you could use on your #nav):
clearfix reloaded and overflow:hidden demystified

Thierry,

Nice article! I see what you are saying, but since that is the standard method of creating a dropdown, I cannot give the LIs position:static. display: inline-block;seems lie a sweet fix, thanks…

Hi,

Usually I would give the nav an em height to hold it open and vertically center the text with line-height and not padding.

e.g.


ul { margin:0; padding:0; list-style:none }
li a { display:block;}
#nav{background:silver;[B] height:2.5em;line-height:2.5em[/B]}
#nav li{ float:left;position:relative; [B]padding:0 10px;[/B]}
#nav li li { float:none;[B]line-height:1.3;padding:5px 10px}[/B]


Inline-block is ok but does change the behaviour and you would need to fix it for ff2 and older (-moz-inline-box).

Or you could set #nav to position absolute and it would auto clear its children but of course removes itself from the flow:)

That’s correct. Imho, overflow can’t work here since the top list items have to be containing blocks, but the clearfix method should solve the problem.

I think there is nothing wrong with using clearfix as long as the element is not sitting next to float(s).

Yes the clearfix would perhaps be the easiest solution in this case :slight_smile:

Clearing is one of those things that depends on the situation so there isn’t just one answer for all cases. I suppose that’s the reason it confuses a lot of beginners.