All Levels Navigational Menu - .selected class

[lighthunter]

1) Script Title: All Levels Navigational Menu (v1.31)

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

3) Describe problem:

The only problem I have is the class ".selected".
If I set a menu item to class .selected it appears selected according to my CSS styles... so far so good.

If it is a menu item that has no child elements it is no problem to hover the item. The item is still .selected. Now: In case it is a menu item with a submenu the class .selected disappears by just hover it with the mouse.

Only after clicking it again it is .selected


Something in the JS might change the class by just hover the item. Is that a bug?

Thanks in advance!

Guido

[ddadmin]

I'm not sure I get the picture entirely yet. Does the same problem occur with the DD demo as well? The .selected class must be defined on the A element itself in order for the script to correctly apply/unapply it to the menu items.

Please post a link to the page on your site that contains the problematic script so we can check it out.

[lighthunter]

Hi there,

in the demo you cannot check this issue because there is no .selected class used.

here is my link:
http://www.topatec.de/_neu/

the two links with a submenu doesn't stay selected if i hover them...

[ddadmin]

Hmmm testing the link you posted, I still don't understand the issue. I assume your .selected class gives the menu item a gray background and red text color right? Hovering over the two menu items that contain a drop down, they both get that treatment until the mouse rolls out of them as expected.

[lighthunter]

Ok, I try to explain...

I click on "Unternehmen" - the button is gray (.selected) - fine.

Then I just hover it and the active class disappears...

The button doesn't stay as .selected. That ist the issue.



I've tested this in all browsers so I guess it is a bug in the JS.

[ddadmin]

Ok I see what you mean. This occurs because you're using the same ".selected" class to permanently highlight the menu item pertaining to the current page. What you should do is create a separate class for that, such as ".currentpage", which may merely be a duplicate of ".selected".

BTW, in FF2, there is a z-index issue with your drop downs causing them to disappear as soon as the mouse rolls over them. You should try moving the drop down menus' HTML to the very bottom of your page (right above the </body> tag):

      <!-- Top Drop Down Menu 1 HTML -->
      <ul id="ddsubmenu1" class="ddsubmenustyle">
        <li><a href="topatec-unternehmen.html">Wir &uuml;ber uns</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
      <!-- Top Drop Down Menu 2 HTML -->
      <ul id="ddsubmenu2" class="ddsubmenustyle">

        <li><a href="wasseraufbereitung.html">Wasseraufbereitung</a></li>
        <li><a href="abwassertechnik.html">Abwasserbehandlung</a></li>
        <li><a href="reinigungstechnik.html">Waschtechnik</a></li>
        <li><a href="regenwassernutzung.html">Regenwassernutzung</a></li>
        <li><a href="fettabscheider.html">Fettabscheider</a></li>
        <li><a href="abscheidertechnik2.html">Benzinabscheider</a></li>

        <li><a href="abscheidertechnik2.html">Koaleszenzabscheider</a></li>
      </ul>
      <!-- end navigation -->

</body>

[lighthunter]

Thank you so much!

Now it works great! I didn't check FF2 before (only FF3), but now I changed the submenus position as well.

The menu is just great and highly customizable.