hovering over Parent Menu updates Child Menus

4 posts, 0 answers
  1. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 27 Aug 2013 Link to this post

    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">
     
     
        .RadMenu_Default .rmGroup .rmLink { 
            padding-left0px ;        
        
       /*rmRootLink rmLink*/
        .RadMenu_Default .rmGroup .rmLink .rmText { 
            padding-left5px 
             
        }
     
     
     
        .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.*/
             border1px 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?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 27 Aug 2013 Link to this post

    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.
  5. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 27 Aug 2013 Link to this post

    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.
Back to Top