I know that there is someway to figure this out, I see these sorts of menu's all the time. I think I've just been working on it too long and can't figure it out.

I want to link a horizontal menu that is created with html/css/js to a different css file than the rest of the page is on. It isn't working using the same css file as the rest of the page because I have another menu's css info in that. Here is an example using the same css file.

HTML: http://www.aspenequipment.com/test_page.html

CSS: http://www.aspenequipment.com/flyout/flyout.css

And the top menu bar should look similar to the one on this page...

http://www.aspenequipment.com/index.html

Now here is the page with the menu that works like I'd like to have in place of the global menu on the rest of the pages.

HTML: http://www.aspenequipment.com/flyout/dropdown.html

CSS: http://www.aspenequipment.com/flyout/dropdown.css

I KNOW this has something to do with div id's and is probably a fairly simple fix. Pandy worked with me on one other similar id issue, but I can't seem to get them to work right. Ideally I'd just like to refer that div to a separate css file, but I haven't been able to figure out how to do it.

I could be that I've been staring at it for 4 hours now and it's all blending together.

Thanks for any insight.

You can't link part of a page to a CSS file. But you can make part of a style sheet be specific to that part of the page (or you could use a separate style sheet if you prefer). Just use selectors that are unique for the menu that you want to style differently. So, as you were already thinking, use a unique id for that special menu.