Drop down menu, slideup not working

HTML & CSS
1

I know the SlideUp problem I have is written in Jquery, but I’m wondering now if it is my CSS?

I have double checked it and even copied someone else’s code, so I’m thinknig it’s not the jq.

here is the link, go to the products button.

http://facetofacetutoring.com/navtest/ogs_nav.html

2

You should try and hide it via margin-left:-999em or something, and then bring it back via margin-left:0

It’s slightly more stable in iE :slight_smile:

3

Okay I can change the display:none easily.

But I got the drop down working before I even used the JS.

I got the menu to drop, and I wanted the JS to slide the menu up and down. So my CSS was working to soley drop the menu down.

4

The slideUp portion is not working.

When you hover over products, yes it slides down like it’s suppose to, but when you move your cursor off of it everything messes up, it’s pretty easy to tell.

5

It takes a second but it does indeed dropdown for me, which browser are you using?

6

Wow that is messed up. Hover on the first item in the dropdown then move your cursor off to the left and the last link (Contact) in the main list pops up.

Scripting should just enhance the page and not leave it in a non working state if is disabled. Your menu is using display:none; to hide the sub ul which makes it keyboard tabbing impossible. When your js is disabled your dropdown stops working too.

I would look into to using something like Superfish that is built off of a pure css dropdown then enhanced with js for visual effects.

7

Ah I see it, as Ray said this is not hte CSS’s fault, but rather teh JS (though you’re CSS neds to be worked on a bit to not use display:none to hide)

Superfish is quite good :slight_smile:

8

so instead of display:none;

I’d do like a left:-9999px; kind of thing?