Sub-Menus Not Fixed In Position

**WycheGnome** · 04-23-2009, 01:57 PM

1) Script Title: AnyLink CSS Menu 2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

3) Describe problem: I have implemented AnyLink CSS Menu 2.0 on a web site I am developing and have run into a problem I have not been able to solve.

The code for the web site is too long for posting on a forum but can be readily located by following this link - http://wycherail.co.uk/srs/calendar.html - please feel free to wander around other the pages as well.

The problem I have is making the sub-menu 'stick' to the 'master' menu button in the way it does on the demonstration page on the Dynamic Drive site.

A requirement for my site pages is to have the main menu visible at all times in the left hand 'column' regardless of whether the main part of the page has been scrolled or not. This has been achieved by positioning the #navigation division as 'fixed'. The right hand column (#main division) is also positioned to set co-ordinates but is left as 'static' so it can be scrolled as necessary. The background column colours are implemented by use of a background image.

anylinkcssmenu.js has been copied to the web site exactly as it was downloaded from DynamicDrive. A cut down version of the .anylinkcss style has been incorporated into srs.css, as most of the original content of the anylinkcssmenu was not needed in this implementation.

Currently the two sub-menus pop up with the desired appearance and style (they are attached to main menu buttons Publications and Bookstall) and horizontal position ok. Vertically they seem to attach themselves positionally to the #main division in some way. The result of this becomes apparent when a page is scrolled down - the sub menu is higher than it should be and, on longer pages, out of sight entirely!

I have tried different settings in the .anylinkcss style and also the solution suggested in thread 12497, but to no avail. Presumably I need to change anylinkcssmenu.js in some way. But how and where?

Can anyone suggest a solution or modification that will allow each sub-menu top entry to line up with the relevant 'master' menu button and remain lined up in that position regardless of whether the page is scrolled down or not.

Any help or guidance will be much appreciated.

**jscheuer1** · 04-23-2009, 02:33 PM

You have an extra <html> tag right before the closing </head> tag of the page. This is not the problem, but best to get rid of it. I think the problem is that browsers are not unified on how to deal with fixed positioning. IE 6 and less just don't get it at all, others have various ways of dealing with it, especially when other items are positioned within a fixed position element.

Things worked just fine in Opera, but not in IE 7 or Firefox 3. All of these browsers 'support' fixed positioning.

However, I found that by adding this style:

Code:

<style type="text/css">
.anylinkcss {
position:fixed!important;
}
</style>

It took care of the problem in IE 7 and Firefox 3.

**WycheGnome** · 04-23-2009, 02:55 PM

Wow.

I didn't expect a response that fast. Thank you John.

Making the change from "position:absolute" to "position:fixed!important" works wonders and the sub-menus arenow fixed just where I want them.

Thank you once again for your help.

John

**WycheGnome** · 04-23-2009, 03:00 PM

John

One thing I forgot to mention. That <html> tage (and some others that shouldn't be there either) are gifts from Dreamweaver. One of its quirks when using library files in headers. Others include cheekily adding "Library/" in front of file names when you don't want it!

Thanks again, John

**WycheGnome** · 04-23-2009, 07:27 PM

The menus - sub-menus work ok now in IE7 although the first line of the sub-menu appears one main menu item higher than expected. The sub-menus do appear at correct position in Firefox 3.0.9.
But Firefox has produced another problem. Going down the main menu list things 'hang' part way down, specifically at the 'Bookstall' button. Also, once a selection has been made and Firefox displayed the new page or position, the menu buttons (and sub-menu buttons) fail to respond to mouseover until a mouseclick has occurred on the #main part of the page.
Any thoughts on why Firefox should misbehave in this way??

Thread: Sub-Menus Not Fixed In Position

Thread Tools

Search Thread

Sub-Menus Not Fixed In Position

Bookmarks

Bookmarks

Posting Permissions