jquery drop down help...

[first trading]

Could anyone shed some light on a small problem i'm having. I have made a jquery drop down menu. The problem is when you 'mouseout' of the menu ('li:a') the menu won't slide back up until the 'mouseout' is also no longer over the ('li').

I need the 'li' to be a lot wider than the 'li:a' so i was wondering if someone here might know a lot more about jquery than me.

The weird thing is that the menu works exactly as it should, but only on the homepage when viewed in IE8. But no other pages or browsers. Why would this be...?

Here are some links, when you mouseover the menu then mousedown the menu, move the cursor off the menu to the right, you will see that it stays down and does'nt slide back up. Also i've included some example code.

Homepage, (which is how it should work when viewed in IE8).

http://www.gearsofwargear.com/

Product page, which is not working correctly.

http://www.gearsofwargear.com/index....products_id=12

Example code is below:

$('ul.topnav > li:a').mouseover(function(){

$(this).find('.test').stop().animate({height:'520px',width:'400px'},{queue:false , duration:900, easing: 'easeOutSine'})
});

$('ul.topnav > li:a').mouseout(function(){

$(this).find('.test').stop().animate({height:'0px',width:'50px'},{queue:false, duration:900, easing: 'easeOutSine'})

});

[renegaed]

hi there,

post me the html and css of the dropdown menu u created and i'll have a look for u. i don't quite understand why u insist on having the menu items have a width of 400px. if u could explain it briefly that would help.

anyhow the code should let me figure most of it out for u.

[renegaed]

hi again,

i had a thorough look through your source code and i must say that the css is a bit all over the place. for example u r referencing 2 separate stylesheets which happen to contain duplicate styling for the same objects. this is redundant and will also slow ur site down (esp. if u r planning to cater for a large audience in the future).

also i noticed that u hardcoded in the widths and heights for ur jquery menu. this is not ideal because when u add/remove items from ur list u will have to come back and edit ur jquery.

my advice to u would be to save urself a lot of time and grab one of the popular jquery navigation menu plugins. they r very easy to use and look great.
i would recommend for u superfish: http://users.tpg.com.au/j_birch/plug...fish/#examples

hope that helps!

[first trading]

Hi, thanks for the reply. The width has to be 400px and the css looks all over the place for this reason.

In order to get the 2 submenu's to show the width of the first container has to be wide enough to accomodate the other two otherwise they they get cut off. They only expand to the width of the first container, and i can't figure out why exactly.

Ive tried position absolute...............i've tried everything. This is why the css looks all over the shop. Also i only have the duplicate css for backup at the minute. I have tried with just one css and it changes nothing, so i'm only leaving it there for the time being, it will be deleted when i get this figured out.

I've looked at superfish but many thanks for posting up. I wanted to do a menu of my own, but i might be going down this route to begin with i think.

[llynix]

Why use jquery at all. Drop down menu's can be designed perfectly well with just html/css.

There is a problem with IE6 not supporting :hover but that is easily managed with a piece of javascript:
http://www.alistapart.com/articles/dropdowns

I've got one in action at http://buydentalequipment.com

[first trading]

I've done more or less exactly the same thing you have with the html, css drop down. The point of this one was to create a menu that degraded gracefully and expanded gracefully as oppose to immediately.

Seriously thinking about going back to the css version though.

Thanks for the input.