Image Roll-Over with Drop-Down (Pop-Out) Text Menu

Hi Everyone...

I've used the DynamicDrive for help before and found it extremely useful for text based menus, but it doesn't seem to offer too much help with image/rollover button based menus.

I am currently trying to switch our website from Javascript to CSS. Part of the problem is that the Javascript on our website is dynamically generated. That is, if someone adds a page to the website using the CMS, it will appear in the drop-down (pop-out) menu from the Syd's rollover button.

The code was originally generated with Dreamweaver 8. However, we have externalized the javascript and it is now loaded from a file. Apparently, Dreamweaver has a BIG PROBLEM with the external javascript, as well. Not all of the child menus will load properly when we reinsert the code into the page for development purposes.

The upshot is that we are trying to create a new drop-down (or more accurately called a "pop-out") menu from the next "AutoParts" rollover button. And trying to build a new menu which uses both roll-overs is proving to be too difficult because of the modifications we have made to the code (the same drop-down javascript menu is employed in both the top navbar and the main side menu so that only one external menu file has to be updated each time a new page is added).

The drop-down (or pop-out) menu that we want to add to the top horizontal navigation bar menu and the side verticle menu for the Auto Parts rollover buttons are actually going to be static. It will simply show two options, "Search Auto Parts" and "Featured Products".

Therefore, since they aren't going to be a part of the dynamic javascript menu anyway, I was thinking that we could just use a CSS menu from that roll-over image. And since the image itself uses javascript to roll-over the image, all I really need is to extend this with a simple static CSS drop-down pop-out menu. But to complicate this even further, some places use lists to create drop-downs, some use tables.

Well, we use lists and tables extensively throughout the site, so using this method is not good. I have seen a method of using the <H2> tag to setup the hidden drop-down, but I am very curious why I cannot find a way to do this using layers? I mean, wasn't this why multiple layer depths were invented in the first place?

All this crap can get pretty confusing, too. There really ought to be a clear method of setting up logical code, so that I can do it over and over, and infact, set it up so that the code can be created dynamically and shared between menus as we had done with the javascript.

Honestly, part of the reason I do NOT like javascript at all is that it doesn't LOOK logical. It reads like garbage, it is extremely hard to make any sense from the code. I have created several javascript menus in several visual editors. They always mess-up the look of the navbar and when I go in to the code to customize it so that it will work, I see JIBBERISH. They add an arrow or a table which is way too big, and it gets way out of hand. I try to adjust things so that they will work and they stop working.

I am getting tired of this. I would just like to be able to write the code simply and logically. But even CSS seems illogical. Why tie-up great structure resources such as list, table or H2 tags at all?

Isn't there anyone doing this as CSS was designed to? If so, where?

I suppose I should mention that if you have IE7, it has some strange bug where a space or a hyphen is interpretted as a return or line BReak (<BR>). Therefore, when browsing our site in IE7 you only see one word in the menus on our website at this time. We view this as a stupid bug with IE7 and although we know a work-around, we find that this bloats the code and is uneccessary. We are expecting IE7 to fix this bug, as the bug does not lie with the code.