RadMenu css

5 posts, 0 answers
  1. Jacobo
    Jacobo avatar
    4 posts
    Member since:
    Feb 2012

    Posted 13 Jan 2013 Link to this post

    Hello everyone!

    I'm developing a web application (aspx), and I have a radMenu in a master page. I have modified the CSS of the RadMenu, but I have a little detail wich I don't know how to fix. 

    When I hover on a submenu, the parent back color goes white. I attached a .jpg that will explain better the situation.

    What I want is to change the white back color of the image. 

    thanks
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 14 Jan 2013 Link to this post

    Hello Jacobo,

    Can you please provide either a live url or a very simplified markup of the menu as well as the customs styles that you are using? Thus I will be able to test it locally and help you out in your particular case. 

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jacobo
    Jacobo avatar
    4 posts
    Member since:
    Feb 2012

    Posted 14 Jan 2013 Link to this post

    /* DEFAULTS
    ----------------------------------------------------------*/

    body   
    {
        /*background: #b6b7bc;*/
        background: url('../Imagenes/login_back.jpg') ;
        background-repeat: repeat-x;
        font-size: .80em;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        color: #696969;
    }

    a:link, a:visited
    {
        color: #034af3;
        top: 0px;
        left: 0px;
    }

    a:hover
    {
        color: #1d60ff;
        text-decoration: none;
    }

    a:active
    {
        color: #034af3;
    }

    p
    {
        margin-bottom: 10px;
        line-height: 1.6em;
    }


    /* HEADINGS   
    ----------------------------------------------------------*/

    h1, h2, h3, h4, h5, h6
    {
        font-size: 1.5em;
        color: #666666;
        font-variant: small-caps;
        text-transform: none;
        font-weight: 200;
        margin-bottom: 0px;
    }

    h1
    {
        font-size: 1.6em;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    h2
    {
        font-size: 1.5em;
        font-weight: 600;
    }

    h3
    {
        font-size: 1.2em;
    }

    h4
    {
        font-size: 1.1em;
    }

    h5, h6
    {
        font-size: 1em;
    }

    /* this rule styles <h1> and <h2> tags that are the 
    first child of the left and right table columns */
    .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
    {
        margin-top: 0px;
    }


    /* PRIMARY LAYOUT ELEMENTS   
    ----------------------------------------------------------*/

    .page
    {
        width: 960px;
        background-color: #fff;
        margin: 20px auto 0px auto;
        border: 1px solid #496077;
    }

    .page1
    {
        /*width: 960px;*/
        width: 340px;
        background: transparent;
        /*background-color: #fff;*/
        margin: 20px auto 0px auto;
        border: 0px solid #496077;
    }



    .header
    {
        position: relative;
        margin: 0px;
        padding: 0px;
        background: #4b6c9e;
        width: 100%;
    }

    .header1
    {
        margin: 0px auto 0px auto;
        padding: 0px;
        /*background: #4b6c9e;*/
        background: url('../Imagenes/menu.png') ;
        width: 953px;
        height:114px;
    }

    .header h1
    {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

    .main
    {
        padding: 0px 12px;
        margin: 12px 8px 8px 8px;
        min-height: 420px;
    }

    .main1
    {
        padding: 0px 12px;
        margin: 10% 10% 10 10;
        min-height: 420px;
    }

    .botonLogin
    {
        background: url('../Imagenes/login%20boton.png');
        border: none;
        width: 164px;
        height: 37px;
    }

    .leftCol
    {
        padding: 6px 0px;
        margin: 12px 8px 8px 8px;
        width: 200px;
        min-height: 200px;
    }

    .footer
    {
        color: #4e5766;
        padding: 8px 0px 0px 0px;
        margin: 0px auto;
        text-align: center;
        line-height: normal;
    }

    .footer1
    {    
        /*width: 960px;*/
        width: 120px;
        background: transparent;
        /*background-color: #fff;*/
        margin: 20px auto 0px auto;
        border: 0px solid #496077;
    }


    /* TAB MENU   
    ----------------------------------------------------------*/

    div.hideSkiplink
    {
        background-color:#3a4f63;
        width:100%;
        
    }

    div.menu
    {
        padding: 4px 0px 4px 8px;
        width: 867px;
    }

    div.menu ul
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71;
        border: 1px #4e667d solid;
        color: #dde4ec;
        display: block;
        line-height: 1.35em;
        padding: 4px 20px;
        text-decoration: none;
        white-space: nowrap;
    }

    div.menu ul li a:hover
    {
        background-color: #bfcbd6;
        color: #465c71;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #465c71;
        color: #cfdbe6;
        text-decoration: none;
    }

    /* FORM ELEMENTS   
    ----------------------------------------------------------*/

    fieldset
    {
        margin: 1em 0px;
        padding: 1em;
        border: 1px solid #ccc;
        background-color:transparent;
    }


    .CajaLogin
    {
        /*width: 960px;*/
         margin: 20px auto 0px auto;
         /**border: 1px solid #496077;*/
         position:absolute;
         width:314px;
         height:322px;
         background: url('../Imagenes/cajita%20login.png');
    }

    .CajaLogin .Campos
    {
        width: 100%;
        position:absolute;
        top:75px;
        margin-left:10%;
        margin-right:10%;
    }

    fieldset p 
    {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label
    {
        display: block;
    }

    fieldset label.inline 
    {
        display: inline;
    }

    legend 
    {
        font-size: 1.1em;
        font-weight: 600;
        padding: 2px 4px 8px 4px;
    }

    input.textEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    input.textEntry2
    {
        
        width: 320px;
        border: 1px solid #ccc;
        opacity:0.6;
        /*filter:alpha(opacity=60); /* For IE8 and earlier */
        
    }

    input.passwordEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    div.accountInfo
    {
        width: 42%;
    }

    /* MISC  
    ----------------------------------------------------------*/

    .clear
    {
        clear: both;
    }

    .clear1
    {
        clear: both;
    }

    .title
    {
        display: block;
        position:absolute;
        float: left;
        text-align: left;
        width: auto;
    }

    .title1
    {
        display: block;
        position:absolute;
        float: left;
        text-align: left;
        width: auto;
    }

    .loginDisplay
    {
        font-size: 1.1em;
        display: block;
        text-align: right;
        padding: 9px;
        color: White;
        
    }

    .MenuTelerik
    {
        position:relative;
        height:50px;
        left:180px;
        padding: 20px 0 0 0;
    }


    .loginDisplay span
    {
        color: #7cbe31;
    }

    .loginDisplay a:link
    {
        color: white;
    }

    .loginDisplay a:visited
    {
        color: white;
    }

    .loginDisplay a:hover
    {
        color: white;
    }

    .failureNotification
    {
        font-size: 1.2em;
        color: Red;
    }

    .bold
    {
        font-weight: bold;
    }

    .submitButton
    {
        text-align: right;
        padding-right: 10px;
    }

    /* Manuales*/

    .BotonesMantenimiento
    {
        position:relative;
        width:200px;
        left:700px;
    }

    /*Menu*/


    .RadMenu
    {
        float: right;
        border: none !important;
        background: none !important;


    .RadMenu_Default .rmRootGroup
    {
        background: none !important;
        border: none !important;
    }

    .RadMenu_Default .rmRootGroup .rmText  
    {  
        font-size: large !important;  
        color: White;


    .RadMenu_Default .rmGroup .rmText  
    {  
        font-size: large !important;  
        color: Black;


    /*.RadMenu_Default .rmLink:hover, 
    .RadMenu_Default .rmFocused, 
    .RadMenu_Default .rmExpanded 
    {
        background-color:  #7cbe31;
        color: Black;
        border-color: #7cbe31;
    }*/

    .RadMenu_Default .rmRootLink .rmExpanded
    {
        color: Green;
    }

    div.RadMenu .rmHorizontal .rmText:hover
    {
        background-image:none;
        background-color:#d2d2d2; 
        color:green;
    }
  5. Jacobo
    Jacobo avatar
    4 posts
    Member since:
    Feb 2012

    Posted 14 Jan 2013 Link to this post

    Thanks for the support. I've just posted the entire style sheet that Im using.

    Thanks!
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Jan 2013 Link to this post

    Hi Jacobo,

    You can add the following css class selectors and set the desired color. The first one sets background-color to the root menu items while the second one sets background-color to the expanded and selected root menu items:
    .RadMenu_Default .rmHorizontal a.rmRootLink {
               background-color: green;
           }
           .rmLink.rmRootLink.rmSelected.rmExpanded,
           a.rmLink.rmRootLink.rmExpanded {
               background-color: red;
           }

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017