Chrome CSS Menu problem with .selected tag

[tmate]

1) Script Title:
Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:
http://www.tmatelson.com/SHC/services.html

Main menu items are tagged .selected so they are bolded when the user is on that page. Two main menu items have dropdown menu items. When I scroll the dropdown items and don't choose one, but rather move my cursor toward another main menu item, the selected main menu item is no longer bolded. So, as the user moves the cursor around it is no longer obvious which main menu (page) they are on. It seems that the .js has an update: July 23rd, 08 to v2.4fix for this - unless it is another issue addressed. I find the problem in IE8, FF3.0.7, chrome13.0.782.215, opera1150. It's subtle and I didn't notice at first - hope I've explained this understandably! :o

[jscheuer1]

Thanks for opening a new thread.

I'm still not 100% sure I understand the question. But I think I do. If I do I think you have two things confused (apples and oranges). The class="selected" is for the internal workings of the menu. What was fixed was that before mousing out of the trigger over its drop down used to de-select the trigger. Now it remains selected until you leave both it and its drop down. That's the apples.

The oranges is that you want to use this same class (selected) to create a marker so that the user knows which page they're on. So you hard coded it into that trigger for each page. But that class is for the internal workings of the menu. Regardless of how it got there, it gets removed when the mouse moves out of both the trigger and its drop down.

What you want is something else that will keep that bold effect there. Except it's not a bold effect. The text remains bold all the time. What changes is how dark it is. You can hard code that. For example on the services.html page you could change:


<ul>
<li><a href="#" rel="dropmenu2" >Home</a></li>
<li><a href="#" class="selected" rel="dropmenu1">Patient Services</a></li>
<li><a href="locations.html">Clinic Locations</a></li>
<li><a href="practitioners.html">Our Practitioners</a></li>
<li><a href="healthwellness.html">Health &amp; Wellness</a></li>
<li><a href="webview.html">WebView Login</a></li>
</ul>

to:


<ul>
<li><a href="#" rel="dropmenu2" >Home</a></li>
<li><a href="#" style="color: #000;" rel="dropmenu1">Patient Services</a></li>
<li><a href="locations.html">Clinic Locations</a></li>
<li><a href="practitioners.html">Our Practitioners</a></li>
<li><a href="healthwellness.html">Health &amp; Wellness</a></li>
<li><a href="webview.html">WebView Login</a></li>
</ul>