The disappearing submenu...

You may have seen my post earlier concerning the creation of a css driven menu system. I figured out all of that. Now I have a problem with the submenu items. Take a look at this page...

http://thehtmldude.com/navtest.shtml

Roll over the menu items. They move to the right nicely and all that, but when you reach the "Reviews" item, a submenu pops up. Try to hover over the links on that menu. You may be able to get them the first time, but after that when you try to hover over them the submenu disappears.

The css can be found here...

http://thehtmldude.com/css/nav.css

It's really bothering me that you can't get those submenu items. Does anyone know a solution?

Is javascript a solution? Like this...

http://www.thehtmldude.com/text.shtml

..or it going to just cause problem in the long run?

I really wish someone would have answered this question. I'm having the same problem with my horizontal menu. It's the last piece to my puzzle. Someone help. PLEASE!!!

I just noticed that if I drag the most down to the submenu items really fast, the submenu doesn't disappear. This is Firefox by the way and yes, I also set the z-index greater than 0

I was having some troubles with a vertical menu the other day. This vertical suckerfish menu worked quite well.

http://www.htmldog.com/articles/suck.../vertical.html

Being as though it was recommended I follow the css tutorial in the pdf on this site that steers us away from suckerfish, I'll stay on my present course.

FYI, I figured out the issue that I was having. I hope this helps. The problem is that the submenu was "too far" in distance from the parent. This causes you to have to move the mouse really fast over the submenu so that it doesn't disappear. Now when I say too far it may not be obvious to the naked eye but it's technically outside of the parent li. So I would suggest moving the submenu up inside the parent just barely enough so that the submenu doesn't disappear when you hover over it.

Okay thanks. I ended up using a non-interfering javascript/xhtml/css menu. It looks nice. Take a look.

Good stuff!!!! Glad you got it working. I thought I was all finished with my menu until i tested it out in a different resolution. I created it in 1024 res and it's all out of whack in any other res. I should have used percentages instead of pixels. It's going to be a tough task to convert from pixels to percentages. I have no idea with things like how -40px translates to a percentage.

Yeah. I created that site in percentages mostly so it works in almost all resolutions. There's a weird bug with the entire site in IE though that I can't figure out.

I fixed it. Apparently IE doesn't like external javascripts.

Glad you got it working. I struggled with converting px to % so i converted px to em instead with the help of this cool calculator i found on the web. Unfortunately this still didn't do the trick. Now, I need to convert from em to %. This sucks. I don't think there's a calculator available for this.

yeah unfortunately not b/c there is no way to say %=px. Your resolution changes how many pixels per percent. If that makes any sense

If you work with a premade menu, or anything premade really, you need to watch it every time you make a change to the CSS in all the browsers you test with. If you do that, you don't have to worry about it not working after you've got it styled the way you want. Sometimes they can be a hassle, and sometimes they work great. Once you get it working, there's no reason to tinker with it anymore.

My header and menu were made from scratch. I have an idea of what my problem is but it's a little difficult to explain. I let you guys know if I get it working.