I've search and Google this to death, and can't find the solution.
I have an ASPMENU control in my MasterPage, bound to a sitemap. It is a horizonal menu with 3 levels. I am changing the background color when the user hovers over an item. This works, except the static items don't retain the change as you move down to it's children. It works fine going from level 2 to level 3. It's kind of hard for me to explain. Here is a site doing what I am attempting (but with only 2 levels, www.boozallen.com/about. See how the top level stay highlighted as you change selections? Below is my page/skin/css. Can anyone help me with this? Thanks!
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="AdminMaster.Master.vb" Inherits="AWPS.UI.AdminMaster"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)"/>
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)"/>
<link runat="server" rel="Stylesheet" type="text/css" href="~/App_Themes/Army/CSS/Master.css" />
<link runat="server" rel="stylesheet" href="~/Css/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
<title>Untitled Page</title>
</head>
<body>
<form id="FormMaster" runat="server" method="post">
<div id="container">
<div id="banner">
<amc:AmcBanner ID="Banner" runat="server" />
<div id="menuBar" runat="server" class="menuBar">
<div id="menuDiv" runat="server" class="menuDiv" >
<asp:Menu ID="AdminMenu" runat="server" DataSourceID="MenuSource" SkinID="MenuSkin" StaticDisplayLevels="1">
<DynamicItemTemplate>
<table onclick="this.parentNode.click();" onmouseover="this.style.cursor='pointer';">
<tr>
<td id="menuCel" class="menuCel">
<%# Eval("Text") %>
</td>
</tr>
</table>
</DynamicItemTemplate>
</asp:Menu>
</div>
</div>
<div id="navBar" runat="server" class="navBar" >
<div id="smpDiv" runat="server" class="smpDiv" >
<asp:SiteMapPath runat="server" ID="smPath" SkinID="SiteMapPathSkin" >
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
</div>
<div id="buttonDiv" runat="server" class="buttonDiv" >
<asp:LinkButton ID="ExcelLinkButton" runat="server" SkinID="ExcelLinkButton" CssClass="excelLink" />
</div>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="AuthContent" runat="server" >
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<amc:AmcFooter ID="TagFooter1" runat="server" />
</div>
</div>
<asp:SiteMapDataSource ID="MenuSource" ShowStartingNode="false" StartingNodeUrl="~/Admin/AdminHome.aspx?type=m" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/ScriptLibrary/PageRequest.js" />
</Scripts>
</asp:ScriptManager>
</form>
</body>
</html>
<asp:Menu runat="server"
SkinID="MenuSkin"
Orientation="Horizontal"
CssClass="menu"
DynamicEnableDefaultPopOutImage="true"
StaticEnableDefaultPopOutImage="False"
ForeColor="Black">
<StaticMenuItemStyle
CssClass="menuStaticMenuItemStyle"/>
<StaticHoverStyle
CssClass="menuStaticHoverStyle" />
<StaticSelectedStyle
CssClass="menuStaticSelectedStyle" />
<DynamicHoverStyle
CssClass="menuItems menuDynamicHoverStyle" />
<DynamicMenuStyle
CssClass="menuItems menuDynamicMenuStyle" />
<DynamicMenuItemStyle
CssClass="menuItems menuDynamicMenuItemStyle" />
</asp:Menu>
.menu
{
font-family: 'MS Sans Serif';
font-size: 14px;
font-weight: bold;
width: 100%;
}
.menuStaticMenuItemStyle
{
padding-right: 10px;
padding-left: 10px;
width: 100px;
}
.menuStaticHoverStyle
{
/* */
border: 1px solid #ADADAD;
height: 16px;
background-color: #FFFFFF;
}
.menuStaticSelectedStyle
{
/* this is just for testing, and not currently working */
border: 1px solid #000000;
background-color: #FFFFFF;
color: #FF0000;
}
.menuItems
{
font-family: 'MS Sans Serif';
font-size: 14px;
padding: 2px 6px 3px 2px;
border: 1px solid #ADADAD;
margin-left: 3px;
background-color: #FFFFFF;
}
.menuDynamicHoverStyle
{
font-weight: bold;
}
.menuDynamicMenuStyle
{
padding: 7px 0px 0px 0px;
border-style: none;
width: 0px;
}
.menuDynamicMenuItemStyle
{
width: 230px;
margin-left: 0px;
}