Text colour on menu items and sub menu items

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    2 posts
    Member since:
    Nov 2012

    Posted 03 Dec 2012 Link to this post


    I am looking to change the colour of the text in menu items and sub menu items.  I am wanting the colour to be different.  I can change the color on all menu items, or menu items without a link to a page - href.  But I have not found a way to change the colour so the top level menu items are different to the sub menu items.

    html is:

    <ul id="menu">
        <li><a href="">menuitem2</a></li>
                <li><a href="">menuitem3a</a></li>
                <li><a href="">menuitem3b</a></li>
    The code below only gets applied on menu items without href.
        /* White - only applied on menu items without href */
    Then this code applies to all menus items (I did not want the sub menus to have the same colour).
    /* Applied to all links - but only want top level menu items*/
    .k-menu .k-item .k-link
        color:#ffffff; /*White*/
    Code is also on jsfiddle:

    Looking at the forums someone suggested
    .k-menu  .k-group
             /*    ..........     */
    But I cannot get this to work.

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Dec 2012 Link to this post

    Hello Ryan,

    In order to achieve the desired outcome you need to increase the CSS specificity of the sub menu items. For example: 
    .k-menu .k-popup .k-item .k-link{
        color: red;

    For more detailed information about CSS specificity, check out this online article.

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top