Welcome to WebmasterWorld Guest from 54.162.184.214

Forum Moderators: open

Message Too Old, No Replies

pull down menu help

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

New User

10+ Year Member

joined:Mar 2, 2004
posts:4
votes: 0


how do I anchor a pull down menu to one place on a page regardless of browser window size?
4:41 am on Mar 12, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


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.