Submenu scrolls as the page scrolls down!

[maeishoj]

Hello everyone,

I am not an expert when it comes to CSS and I have a problem:
In this website I made, I made a submenu to a few menu items.

If you go here: www.aluf.dk --> Produkter --> Drop Box and then once you are here you mouse over"Produkter" again and scroll down the page you will see the submenu following the page.
How do I fix that?
You can see the CSS for it with the "inspect element" if you use chrome, and I know mozilla has something like that (firebug if I remember).

Looking forward to hear from you!

Manuel

[ajfmrf]

I see that happening but only if you start to scroll when the mouse is still over the menu.If you move that mouse off the menu it does not do it.

I am not sure if there is a"fix" but I will try and find more out.

Maybe a css guru can tell us if it is a "fix" able issue or not

[maeishoj]

Well, actually if you scroll down the page right away, without going to the navigation menu (while still maintain the navigation menu on screen) and then you mouse over it, you will see the drop down menu displaced down the page :(

[ajfmrf]

Sorry but if I remove my mouse from the menu(or the two links that drop down) then the menu does not follow to the bottom or toward the bottom.

ONLY,if the mouse is left on the menu does it 'scroll' down toward the bottom.

I do not have the issue you are refering to and I am using firefox 20.0

[maeishoj]

First of all, if it makes any difference I am on a mac.

If you do to Produkter---> Drop Box and then scroll down the page until the navigation menu is visible and then you browse over the navigation in order to get the submenu, this will be down about the middle of the page.
This is true for me with the following browsers:
Chrome Version 26.0.1410.43
FireFox 20.0
Safari Version 6.0.3 (7536.28.10)

Here a screenshot from firefox 20.0 like you ajfmrf:
http://imageshack.us/photo/my-images/820/screenshot20130406at085.png/

[maeishoj]

anyone??

[ajfmrf]

OKay,I see what you mean but as I said it is only visable when you mouse is over the menu link,and leave the mouse over that link

Look at the image you took-the menu item is dark grey,the color of the menu link when it is hovered over.

I do think this should have a fix but I will see if I can look at the script more.

Maybe a better css guru can help....

[miemora]

thank you so much for helping me through this article, this is very useful for me and my site design development

[molendijk]

In your css-file, you have:

#navigation li:hover ul {/*LOOK */
display: block;
position: fixed;/* this fixed the right empty space issue*/
}
That should be:

#navigation li:hover ul {/*LOOK */
display: block;
position: absolute;
width: 1px
}