How to keep static menu item highlighted when dynamic menu appears in ASP.net 2.0?

I don't think this is going to be easy with the stock asp.net menu control.  The problem is that the menu control renders itself using tables, like this:
<div>
      <a href="#Menu1_SkipLink">
            <img alt="Skip Navigation Links" src="/ConnectorWeb/WebResource.axd?d=_G8dUDoNkPNDKRKEuGKUig2&amp;t=632851121711532843" width="0" height="0" style="border-width:0px;" />
      </a>
      <table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
            <tr>
                  <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
                        <table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;">
                                          <a class="Menu1_1 Menu1_3" href="../default.aspx">Home</a>
                                    </td>
                                    <td style="width:0;">
                                          <img src="/ConnectorWeb/WebResource.axd?d=Ir0MkPRdo6QvRbvr9gZQNO_LcBELaFei8T0Fkx_xasg1&amp;t=632851121711532843" alt="Expand Home" style="border-style:none;vertical-align:middle;" />
                                    </td>
                              </tr>
                        </table>
                  </td>
                  <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
                        <table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;">
                                          <a class="Menu1_1 Menu1_3" href="../page.aspx?PageID=1">About Us</a>
                                    </td>
                              </tr>
                        </table>
                  </td>
            </tr>
      </table>
      <div id="Menu1n0Items" class="Menu1_0 Menu1_7">
            <table border="0" cellpadding="0" cellspacing="0">
                  <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
                        <td>
                              <table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tr>
                                          <td style="white-space:nowrap;width:100%;">
                                                <a class="Menu1_1 Menu1_5" href="Default.aspx">Test</a>
                                          </td>
                                          <td style="width:0;">
                                                <img src="/ConnectorWeb/WebResource.axd?d=Ir0MkPRdo6QvRbvr9gZQNO_LcBELaFei8T0Fkx_xasg1&amp;t=632851121711532843" alt="Expand Test" style="border-style:none;vertical-align:middle;" />
                                          </td>
                                    </tr>
                              </table>
                        </td>
                  </tr>
            </table>
      <div class="Menu1_6 Menu1_0" id="Menu1n0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=4NE_uP_KZ8uIcYJul_16SkDTNBs3HL0LBAQzmk1s9wU1&amp;t=632851121711532843" alt="Scroll up" />
      </div>
      <div class="Menu1_6 Menu1_0" id="Menu1n0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=85WFEPkfzGLEvpMLKJyaOaZ35340r0H7Lq47qdBFakU1&amp;t=632851121711532843" alt="Scroll down" />
      </div>
</div>
<div id="Menu1n2Items" class="Menu1_0 Menu1_7">
      <table border="0" cellpadding="0" cellspacing="0">
            <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
                  <td>
                        <table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;width:100%;">
                                          <a class="Menu1_1 Menu1_5" href="menu.aspx">Test2</a>
                                    </td>
                              </tr>
                        </table>
                  </td>
            </tr>
      </table>
      <div class="Menu1_6 Menu1_0" id="Menu1n2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=4NE_uP_KZ8uIcYJul_16SkDTNBs3HL0LBAQzmk1s9wU1&amp;t=632851121711532843" alt="Scroll up" />
      </div>
      <div class="Menu1_6 Menu1_0" id="Menu1n2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=85WFEPkfzGLEvpMLKJyaOaZ35340r0H7Lq47qdBFakU1&amp;t=632851121711532843" alt="Scroll down" />
      </div>
</div>
<a id="Menu1_SkipLink"></a>

Ugly, huh?!?  :)

The reason what you're asking is hard is because each "row" of submenus is a different table.  You can see this with the rendered code above.  So when you hover over a static node, it highlights, but then when you go into a dynamic node, you're actually hovering over a different table altogether, so the static node's "onmouseout" handler fires and the hover appearance goes away.

Having said that, however, Microsoft has released some "css-friendly" adapters that are freely available from the asp.net website:
http://www.asp.net/CSSAdapters/Default.aspx

Included is a menu control adapter that uses <li> and <ul> tags, so then the menu control would render itself like this:
<div class="AspNet-Menu-Horizontal">
      <ul class="AspNet-Menu">
            <li class="AspNet-Menu-WithChildren">
                  <a href="/ConnectorWeb/default.aspx" class="AspNet-Menu-Link">
                        Home
                  </a>
                  <ul>
                        <li class="AspNet-Menu-WithChildren">
                              <a href="/ConnectorWeb/temp/Default.aspx" class="AspNet-Menu-Link">
                                    Test
                              </a>
                              <ul>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="/ConnectorWeb/temp/menu.aspx" class="AspNet-Menu-Link">
                                                Test2
                                          </a>
                                    </li>
                              </ul>
                        </li>
                  </ul>
            </li>
            <li class="AspNet-Menu-Leaf">
                  <a href="/ConnectorWeb/page.aspx?PageID=1" class="AspNet-Menu-Link">
                        About Us
                  </a>
            </li>
      </ul>
</div>

Much cleaner layout!  The great thing about this is that submenus are actually nested.  So when you hover over a static node (let's say the "HOME" node), and the dynamic menu appears, then you move your mouse over one of the dynamic elements (let's say the "Test" node), your mouse is actually hovering over BOTH <li> elements (the static AND the dynamic), so both of them show up as hovered.

The CSS used is a little hard to understand at first, but once you get it, you'll be able to do what you're talking about.  I can send you an example if you'd like.

If you'd like to go this route, I'd suggest starting with the example menu that's included with the CSS adapters and customizing it to suit your needs.  I tried to do mine from scratch, and didn't get very far!  I just took their example and modified it to suit my needs, and it works great!

Hope that helps!  :)

I had look at the CSS friendly adapter for the menu control.  But I beleive I read in the documation that the CSS was only for IE, not the other browsers out there.  So I gave up on that approach.  I may now need to go look at it again.

So if its pretty difficult to keep the static menu item highlighted, then would it be possible to place an image at the top of the dynamic menu where I could have an image that titled the submenu?  That would also give a way to know what sub menu I was on.

Thanks!