Forum Moderators: open

Message Too Old, No Replies

pull down menu help

         

motorhead

2:07 am on Mar 12, 2004 (gmt 0)

10+ Year Member



how do I anchor a pull down menu to one place on a page regardless of browser window size?

isitreal

4:41 am on Mar 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It's actually very easy to do, relatively speaking ;-)

Here's a pseudocode sample:

<div id="menu1">
<a href..>Link 1</a>
<div id="submenu1" class="subMenu">
<a href...>sublink 1</a>
<a href...>sublink 2</a>
</div>

So your submenu is nested in the main menu link,
this is the style for the submenu:
.subMenu {
position:absolute;
width:82%;
top:0px;
left:101%;
}

and that's about it, the menu will open 1% to the right of the main nav link container div, or li item if you prefer, it doesn't really matter.

This guarantees that the submenu will always open exactly where you want relative to the main menu item container, there is no other reliable way that I know of to do this, as hundreds, probably thousands, of websites with drop menus that position correctly only on in MSIE Windows will testify to. If you are doing horizontal navigation it's even easier, just dump the positioning altogether unless you want to add a little space, keep the width, no top, no left (unless you want it to be left of the beginning of the main menu item). Once you get it it will run the same in all browsers, I just implemented this and it works exactly the same no matter what browser it's running on.