Menu Hover Styles

Hi,

I am having some problems styling a menucontrol in ASP.NET.

The problem I am having is trying to style the HOVER on a SELECTED item.

It does not appear to pick up the HOVER when a selected item is rolled over.

For example....

When the item is NOT selected the hover works correctly (see image hover.jgp) The item being hovered over is dark green (Teal) and a normal node is the light green (#EEF7F7).

Ok, if you see the screen shot "selected.jpg" that is what a menu item appears like once it has been selected. - Gray background and black text is the selected item.


Now, when I hover over the selected item it does not pick up the style (it should be the Teal dark green colour like the other) but the background stays at the selected style gray colour.  How ever the text colour does change to white correctly. (See currenthover.jpg)

Can anyone help me resolve this?

So to reiterate, what i am try to achieve is for the hover to be the same whether the item is selected or not!! The hover properties are for the text to be  color: #FFFFFF and the background to be teal.

As I say the hover does not work correclty on a selected item.


Below is the CSS code the source code, and some shots of how it looks.

I have tried all kinds but I am well and truly stumpted as to why the hover doesnt work on the selected item.

Also on the same topic, how would I place an image onto an item is selected. I have created a photoshop image of this below (see hoverarrow.jpg)

Any suggestions will be greatly appriciated!!!

Thanks.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:

<asp:Menu ID="Menu1" runat="server" DataSourceid="sitemap" 
 
BackColor="#EEF7F7" 
 
Width="160px" 
DynamicEnableDefaultPopOutImage="False" 
MaximumDynamicDisplayLevels="0"
StaticEnableDefaultPopOutImage="False" 
BorderStyle="None" BorderWidth="0px"
ItemWrap="True" 
StaticHoverStyle-CssClass="menu-mouse-over">
 
<StaticSelectedStyle  CssClass="menu-selected" />
<LevelMenuItemStyles>
<asp:MenuItemStyle 
 Font-Underline="False" CssClass="menuitemstyle" />
</LevelMenuItemStyles>
 
<StaticHoverStyle CssClass="menu-mouse-over" />
<DynamicHoverStyle CssClass="menu-mouse-over" />
 
 <StaticItemTemplate>
<%# Eval("Text") %>
</StaticItemTemplate>
 
</asp:Menu>
 
 
 
 
/*MENU STYLE*/
 
.menu-mouse-over
{
    color: #FFFFFF;
    background-color: teal;
}
 
.menuitemstyle
{
    border-style: solid none solid solid;
    border-width: 1px;
    border-color: #FFFFFF;
    text-decoration: none;
}
 
.menulevelstyle
{ 
    border-style: solid none solid none; 
    border-top-width: 1px; 
    border-bottom-width: 1px; 
    border-top-color: #FFFFFF; 
    border-bottom-color: #FFFFFF; 
 }
 
.menu-selected
{
    background-color: #E6E6FA;
    color:White;
}
 
.menu-selected a:link
{
    color:black;
}