I havent asked a theoretical question in a while. so I figured the forum experts had this coming.
is it possible to do a horizontal drop down menu WITHOUT using AP? specifically, this would be so that the UL UL WOULD in fact affect the height of its ancestor UL.
Thanks as always for indulging my curiosity.
THANKS PAUL!!!
the whole negative right margin slipped my VERY TIRED mind.
Yeah its possible. I dont remember how I did it though. Have a look for yourself. 
http://www.visibilityinherit.com/code/tabs-example3.php
Yes you can do it without using absolute positioning but the question would be why would you want the parent height to increase?
I have an example here that I converted to floats a while ago for someone in the forum because they wanted a graphical background to move down as the menu appeared.
IIRC I think there was also an old CSS quiz where we made a drop down without using absolute positioning but in that example we didn’t want it impacting on the flow.
My “I didnt get any (ZERO) sleep last night and tonight” mind must have warped reality for me. I was thinking,using Paul’s layout to illustrate, of NOT hiding the UL UL ( that way the parent height would remain constant) also , and here is the rub, the (purple)space below the main menu would be the HEIGHT of the tallest UL UL LI ( that way if you have to have a multi line link or if the UL UL wrapped it would still be contained in the purple.
but, now that i have had 2 hours of sleep, I see that NOT hiding or APing the UL ULs stacks them which mean the height of m purple bar ends up being the SUM of the height of all the sub menus rather than equal to the height of the tallest UL UL 
You lost me there a bit Ray
Are you sorted now or was there some other behaviour that you were looking for? I didn’t quite get the why or wherefore
I was trying to find a pure CSS way to do a slide menu, like the one you posted, but w/o the change in height when the dropdown is displayed and also that would adjust to its largest drop down content ( for example if you had a link or two that warped around to two lines height, the area below the main menu would automatically always be 2 lines tall)
Ok, you can do that quite easily with my menu by giving the ul a negative right margin and changing display:none to visibility:hidden instead.
This is just rough but you get the idea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
/* CSS Document */
html, body {
margin:0;
padding:0
}
body {
font-family: Tahoma, Verdana, Century Gothic, Arial, Helvetica, sans-serif;
margin:17px 0;
color: #000000;
background-color: #ffffff;
text-align:center;/* centre for ie*/
font-size:100%
}
p {
margin:0 0 1em 0;
padding:0
}
#outer {
width:45em;
margin:auto;
padding:0 0 10px;
text-align:left;
position:relative;
background:#CCCCFF url(images/linebottom.png) repeat-x 0 100%;
overflow:hidden;
}
ul#nav {
margin:0;
padding:0;
list-style:none;
width:100%;
}
ul#nav li {
display:inline;
margin:0;
padding:0;
text-align:left;
}
ul#nav li a {
height:1.3em;
width:5em;
padding:3px 1em;
display:-moz-inline-box;
display:inline-block;
text-decoration:none;
color:#000;
vertical-align:top;
}
ul#nav li a:hover {
color:#fff
}
/* drop down styling */
ul#nav ul {
float:left;
position:relative;
width:45em;
margin:0;
padding:0;
list-style:none;
overflow:visible;
line-height:1.3em;
z-index:2;
visibility:hidden;
margin-top:1.5em;
}
* html ul#nav ul {
margin-top:0
}
*+html ul#nav ul {
margin-top:0
}
ul#nav li.current {
background:#ffffcc;
color:red;
}
ul#nav li.current a {
color:red;
}
ul#nav li.current a:hover {
color:pink;
}
ul#nav li.current ul {
display:block;
z-index:1;
top:auto;
background:silver;
}
ul#nav ul li {
position:relative;
display:inline;
width:auto;
text-align:left;
}
#outer ul#nav ul li a {
font-size:80%;
color:#000;
width:auto;
height:auto;
display:inline;
padding:0 5px;
border-right:1px solid #000;
}
#outer ul#nav ul li a.final {
border-right:0px solid #000;
}/*remove border from last sublist */
#outer ul#nav ul li a:hover {
color:red;
}
#outer ul#nav li:hover a {
color:#fff
}
ul#nav li:hover ul, ul#nav li.over ul {
visibility:visible;
background:silver;
}
ul#nav:hover li:hover ul, ul#nav:hover li.over ul {
visibility:visible;
}
p {
width:35em;
padding-top:25px;
margin-left:auto;
margin-right:auto;
}
ul#nav li ul {
margin-right:-100%
}
</style>
</head>
<body>
<h1>Drop Down Menu</h1>
<h2>based on the <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">suckerfish</a> menus</h2>
<div id="navwrap">
<div id="outer">
<ul id="nav">
<!-- add class="current to the list of you want it to be persistent for current menu item -->
<li><a href="dropdown-hoz-safe.htm">About us</a>
<ul>
<li><a href="#">Company Facts</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Factory</a></li>
<li><a href="#">People</a></li>
<li><a class="final" href="#">Press Releases</a></li>
</ul>
</li>
<li><a href="dropdown-hoz-safe2.htm">Products</a>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
<li><a href="#">test7</a></li>
<li><a href="#">test8 with some longer text to wrap to another line</a></li>
<li><a href="#">test9 with some longer text to wrap to another line</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
<li><a href="#">test7</a></li>
<li><a href="#">test8 with some longer text to wrap to another line</a></li>
<li><a href="#">test9 with some longer text to wrap to another line</a></li>
<li><a class="final" href="#">test10</a></li>
</ul>
</li>
<li><a href="dropdown-hoz-safe3.htm">test5</a>
<ul>
<li><a href="#">Gallery</a></li>
<li><a class="final" href="#">Future Events</a></li>
</ul>
</li>
<li><a href="dropdown-hoz-safe4.htm">Support</a>
<ul>
<li><a href="#">Manuals & Software</a></li>
<li><a href="#">Brochures</a></li>
<li><a class="final" href="#">testing</a></li>
</ul>
</li>
<li><a href="dropdown-hoz-safe5.htm">Sales</a>
<ul>
<li><a href="#">Shopping Cart</a></li>
<li><a class="final" href="#">Brochures</a></li>
</ul>
</li>
<li class="dealers"><a href="dropdown-hoz-safe6.htm">Dealers</a></li>
</ul>
</div>
</div>
</body>
</html>
Is that what you meant?