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.
<!-- m --><a class="postlink" href="http://www.aocd00.dsl.pipex.com/menu.htmlGive">http://www.aocd00.dsl.pipex.com/menu.htmlGive</a><!-- m --> 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: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184WOW!!">http://www.webdeveloper.com/forum/showt ... 94184WOW!!</a><!-- m -->!
It's all explained with spoons!
Thanks. I get it now. Worked a treat.
No problem. Any time.
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.
<!-- m --><a class="postlink" href="http://www.aocd00.dsl.pipex.com/menu.htmlGive">http://www.aocd00.dsl.pipex.com/menu.htmlGive</a><!-- m --> 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: <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=294184#post294184WOW!!">http://www.webdeveloper.com/forum/showt ... 94184WOW!!</a><!-- m -->!
It's all explained with spoons!
Thanks. I get it now. Worked a treat.
No problem. Any time.