css dropdown menu appears at the first tab

Question

I am staging my ongoing work here- http://www.22shrutiharmonium.com/version2/index.html

Here, css dropdown menu appears at different menu tabs (and functions accurately as intended). However, once inside the "blog" section, notice the dropdown menu unnecessarily also appearing near the first menu tab, no matter where we hover the mouse over the menu. (IE7, FF3.6.9, Chrome 6.0.472.55)

Basically, I have integrated the external open source blog code into my site and have changed the original blog theme (css) with that of my site. So the dropdown menu part of the css of my site and that of the blog are same (I have copied the dropdown menu part of my css into /blog directory for customizing its css).

Thanks in advance.

Answer 1

To avoid headaches, I would personally recommend using CSS-only menus, if it is not too much time or effort to re-do a few lines of the CSS.

http://htmldog.com/articles/suckerfish/dropdowns/

You can ignore the sf-hover if you aren't concerned about supporting IE6. It also looks like the structure of your current navs matches that the above link, so the process should go pretty smoothly.