A Pig of a sub-menu drop-down problem

I was asked to make a drop-down on a website the other week. And I have spent ages trying to do it. It is a pig. Ok, the first thing I did is I went to www.sspxseminary.org (only for the drop-downs), and I had a look at how they did their drop-downs. Their drop-downs 'scroll' out and are compatible in all browsers.

So, naturally, I had a look to see if I could get their code. There is loads of scripts controlling it. Fat, big amounts of flashy code. Hated it! I gave up because of the size and the fact that I could barely get my head round it!

So, I went on to something else,something simpler. I downloaded some code of of a website and it said 'COPYRIGHT! do not remove this comment!', so I stopped using that code!

Next I decided to make my own code using Document.getElementdBybyId. And I found a simple hide element function in javasript. I perfected it with css, another function and VOILA! I had it working! The drop-down popped out when you hovered over it with OnmouseOver and went away with OnMouseOut. very Nice!

Then the problem's started to become clear! When you scrolled down and hovered over the link, it showed the drop-down in the wrong place, you couldn't reach it without it disappearing! And it didn't work in Internet Explorer! Ok, back to square 1!

So, I then(gave up!) googled 'html submenus'(or something like that!) and I eventually(eventually) found this place, and I found a multi-browser compatible piece of code. So, I messed around with that. This time, I was a little more successful.

So, this one gave me a way to have multiple sub-menu's by throwing the emement 999px to the left instead of hiding it. A little more unprofessional, but it worked! And it was also more compatible than the previous one. My first little problem with it was that it was made for lists, and my menu was in a table. So I had to put a list inside a table to fix that. Then I had to position it, that was eally a pig! But in the end it worked and this is the css I used(No javascript!):


/*Submenu styles:*/
#nav, #nav ul {padding:0;margin:0;list-style:none;text-align:left;}
#nav li ul {height:100px;width:80px;padding:3px;position:absolute;background:url(theme/rim.gif) no-repeat bottom;left:-999px;z-index:+1;}
#nav li:hover ul {left:50%;margin-left:86px;top:198px;}


I hope this help's all the geeks who read my posts(And thanks for reading them too) !