Forum Moderators: open
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.