positioning of div elements

[hessodreamy]

I am making an expandable menu by including hidden div elements within a list, and showing the element when the mouse hovers on the parent menu item.

However I'm having trouble in lining up the new div element with the menu item. Specifying a position is fine until the window is resized, or (heaven forbid) a different broswer is used.

So how do I get the position of the existing table, and how do I shift it so that the submenu falls level, and to the left of the parent menu?

you can see a snippet at the link below. Many Thanks.

http://www.aocd00.dsl.pipex.com/menu.html

[toicontien]

Give the direct container of the DHTML menu relative positioning in CSS. A real quick and dirty example is below that should get you the gist of it. First, the HTML

<ul id="nav">
<li><a>Products</a>
<ul class="subnav">
<li><a>Hammers</a></li>
<li><a>Saws</a></li>
<li><a>Screwdrivers</a></li>
<li><a>Wrenches</a></li>
</ul>
</li>
</ul>

Then the CSS

#nav li {
position: relative;
}

.subnav {
position: absolute;
left: 90%;
top: 0;
width: 120px;
}

Also, check out the following post for a quick and dirty explanation of CSS positioning: http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184

[hessodreamy]

WOW!!!
It's all explained with spoons!
Thanks. I get it now. Worked a treat.

[toicontien]

:D No problem. Any time.