UDM4 expanding menu not working in Firefox 3

[colech]

I was trying to figure out this question as well.

I suspect is has to do with JS doing an onclick or onmouseup BEFORE the anchor href is followed. So, does anyone know how to follow the link as specified in the tag <a href="/about-us/index.php"> in addition to doing the expanding menu. Here are two things I've tried that have not worked so far...

<li class="onclick" onmousedown="location.href='/about-us/index.php';">
...
</li>

<li class="onclick" onclick="location.href='/about-us/index.php';">
...
</li>

[colech]

Wahoo... this page helped me figure out the first half of the problem. Now the items that have submenus are clickable. They don't stay expanded though, so I still need help on that but am looking for the answer now:
http://www.experts-exchange.com/Prog..._22084656.html

NOTE: I am using "udm-x-youarehere.js" instead of "udm-x-snapshot.js" because then if someone manually enters a url in the address bar, the menu will expand properly to right place instead of just saving the last click.

Here is what I gleaned from that and how I got it to work. Notice that I added the onclick to the <a> tag instead of the <li> tag. The reason for using "this.href" instead of "/about-us/index.html" was many people (like myself) have dynamically created menus. It's more difficult to write out the url both in href and onclick, so this way it just copies the value from the href tag to the onclick tag. Now my menu follows the link BUT does not expand for this page. At least we're one step closer.

<li class="onclick">
  <a href="/about-us/index.php" onclick="document.location.href=this.href; return false;">About Us</a>
</li>

[colech]

Whew... I found out how to get the submenu to be displayed when the parent of the submenu is selected when using the expandable menu.

NOTE: To my knowledge, this will only work if you have a dynamic way of adding adding a class to all <li> tags that are currently selected. In this case I chose to use the class "show-since-li-tag-is-active"

Use this CSS (The !important below may or may not be necessary, I was just being safe):

#udm li.show-since-li-tag-is-active ul {
  position:relative !important;
  display:block !important;
  height:auto !important;
  left:auto !important;
  overflow:visible !important;
  visibility:visible !important;
}

And here is the corresponding HTML menu when at url http://www.domain.com/about-us/

<ul>
  <li class="onclick">
    <a href="/" onclick="document.location.href=this.href; return false;">Homepage</a>
  </li>
  <li class="onclick show-since-li-tag-is-active">
    <a href="/about-us/" onclick="document.location.href=this.href; return false;">About Us</a>
    <ul>
      <li class="onclick">
        <a href="/about-us/contact-info/" onclick="document.location.href=this.href; return false;">Contact Info</a>
      </li>
    </ul>
  </li>
</ul>

Please let me know if there is a better way to find an active <li> tag potentially through the use of something in udm-x-youarehere.js. I would really like a better way to do this.

This has been verified to work in FF3 and IE7 assuming I didn't do any typos here

[Sangui]

colech, thank you so much. That works.