CSS Drop down menu first menu showing up on hover over incorrectly

[G33kman]

Ok so I finally created a drop down menu that will show up in all browsers correctly (enough) so that I am happy with it but the issue is I have a ul that is suppose to show up when you hover over one of the main nav links "services" but even when I hover underneath the main links it will appear.

I have been playing with this drop down nav menu for over a week now and am becoming frustrated with it. Lol

Here's a link to the site so you can see what I mean if you move your mouse over the "we pride ourselves" section on the main text it will show the menu I ONLY want this to show when you actually hover over the services link...

http://reichelinsulation.com/new-site/index.html

Sorry if this isn't very clear I don't know how else to word it.

Thanks! Ryan

 

[Edge]

It's because you are hiding them by changing opacity to 0. They're still there. Hide them off screen using left: -2000px and then on hover/focus change the position back to normal.

 

[G33kman]

Ok I did that but when I mouse over them now they come flying in from the left and the orientation looks all messed up (the links are not lining up) so I'm not sure where to go from here.

 

[G33kman]

UPDATE:

Ok so I fixed the issue by stopping the transitions specifically for the nav menu as follows.

.menu * {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

 

[Frank]

It's because you are hiding them by changing opacity to 0. They're still there. Hide them off screen using left: -2000px and then on hover/focus change the position back to normal.

Do make sure to ask co-workers to sit to the right of the machine...