hovering over Parent Menu updates Child Menus

[David]

i have a small issue with the way the CSS is affecting Child Menus.
here is my code

<div style="height:20%;padding-top:50px;">

         <telerik:RadMenu  ID="RadMenu1" Style="float:right;" Flow="Horizontal"  runat="server">

            

        <Items>

            <telerik:RadMenuItem  Text="Messages"></telerik:RadMenuItem>

            <telerik:RadMenuItem  Text="Stock"></telerik:RadMenuItem>

            <telerik:RadMenuItem Text="Cash"></telerik:RadMenuItem>

            <telerik:RadMenuItem Text="Staff"></telerik:RadMenuItem>

            <telerik:RadMenuItem Text="Reports"></telerik:RadMenuItem>

            <telerik:RadMenuItem  selected="true" Text="Admin" >

                

                <Items>

                    <telerik:RadMenuItem  Text="Admin"></telerik:RadMenuItem>

                    <telerik:RadMenuItem text="Stock Admin"></telerik:RadMenuItem>

                </Items>

            </telerik:RadMenuItem>

        </Items>

    </telerik:RadMenu>

     </div>

<style type="text/css">

 

 

    /*http://demos.telerik.com/aspnet-ajax/grid/examples/styles/customskin/MyCustomSkin/menu.MyCustomSkin.css*/

    .RadMenu_Default .rmGroup .rmLink { 

        padding-left: 0px ;        

    } 

   /*rmRootLink rmLink*/

    .RadMenu_Default .rmGroup .rmLink .rmText { 

        padding-left: 5px ; 

         

    }

 

 

 

    .RadMenu_Default  .rmRootGroup  .rmSelected

    {

        background:#f7931d; /*what happens when the Tab is 'Selected'*/           

    }

 

    div.RadMenu .rmRootGroup

    {

        /*all the border tags here, remove the black border that went round the entire Menu Control*/

        border-width:0px;     

        border-bottom:5px solid #f7931d;        

    }

    div.RadMenu .rmRootGroup .rmItem .rmText

    {

        text-align:left;

        /*the Border tags help to seperate each Menu Tab to make it look like its a seperate entity*/

        border-left:solid;           

        border-right:solid; 

        border-left-color:white;

        border-right-color:white;                        

         

        width:70px; /*width of each root tab*/

        height:35px;    /*height of each root tab*/

        color:#979797; /*colour of the text on the tab*/

    }

 

    div.RadMenu  .rmItem:hover .rmText

    {

       color:white;  /*font colour when hovering over*/

    }

 

    .RadMenu_Default .rmGroup .rmText

    {

        /*the border and background properties will remove the block on the left side of the drop down menu where an icon would usually be placed.*/

         border: 1px solid #979797 ; 

         background: #f0f0f0 ;                       

         

    }

 

    .RadMenu_Default .rmText:hover

    {

        background:#f7931d; /*background of tabs when moused over*/

         

    }

 

 

    .RadMenu_Default

    {

        width:598px; /*width of the entire control*/          

    }

</style>

The issue is that when i hover the mouse cursor over the Parent 'Admin' tab, the Parent 'Admin'
tab correctly highlights as orange and the text changes to white, but the sub menus of 'Admin'
(Admin & StockAdmin) also turn white.

moving the cursor so that it no longer hovers over the entire menu shows that the Parent 'Admin'
tab and its child tabs all change back to gray.

i would like it so that when i hover over Parent 'Admin', only the Parent Admin tab has its text
change to gray.
if i was to hover over one of the child tabs, only that one child tab would have its text change
to gray.

is this possible?

[Shinu]

Hi David,

Please try the following CSS class.

CSS:

.RadMenu_Default .rmHorizontal .rmRootLink:hover span.rmText
{
    color: #808080 !important;
}

.RadMenu_Default .rmGroup .rmLink:hover .rmText
{
    color: #808080 !important;
}

Thanks,
Shinu.

[David]

thanks for the reply, shinu.

 tried replacing the current css that deals with the changing of the text color when you hover over the link, with what you've provided and the text doesn't change colour at all.
i then tried adding what you've provided so that it works with what i currently had and that too doesn't change the text colour at all.

i have found that if i replace this (which is from my original code)

div.RadMenu  .rmItem:hover .rmText
{
   color:white;  /*font colour when hovering over*/
}

with

.RadMenu_Default .rmGroup .rmItem:hover .rmText
{
   color:white;
}

although the Main Tabs dont have their text change colour on hover anymore, the sub tabs do. i can't work out whether setting the Main Tabs Hover overrides the setting for the Sub Tabs.

[David]

yeah! got it to work :)

i was trying to modify what you had suggested and couldn't quite get it to work. finally though, i did!
here's my final, working, css.

.RadMenu_Default .rmRootLink:hover span.rmText
{
   color:white;
}

   .RadMenu_Default .rmGroup .rmLink:hover span.rmText
   {
       color:white;
   }

thanks for your help, shinu.