Dropdown portion of CSS

3 posts, 1 answers
  1. James Reategui
    James Reategui avatar
    12 posts
    Member since:
    Oct 2008

    Posted 17 Mar 2011 Link to this post

    I've been looking at the RadMenu Base styles and trying to figure out exactly which portion of the CSS is what makes the dropdowns work.

    I built my own RadMenu.css but for some reason the dropdown's always appear at the top left portion of the screen.

    Below please find my css, any clues as to what is missing would be much appreciated. Or just point me to an example dropdown css code for the RadMenu.

    .RadMenu_ArtDebutant
    {
        width:100%;
    }
     
    .RadMenu_ArtDebutant > ul.rmRootGroup
    {
        float: left;
        display: block;
        list-style-type: none;
        font-size: 17px;
        text-transform: lowercase;
        font-family: Arial Baltic, Arial;
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li.rmItem
    {
        float: left;
        width: 254px;
        height: 30px;
        background-color: #333333;
        border-right: 1px solid #939393;
        margin-right: 1px;
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li.rmLast
    {
        margin-right: 0px;
        width: 255px;
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li.rmSeparator
    {
        width: 1px;
        float:left;
        height: 30px;
        background-color: White;
        border: 0;
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li.rmItem > a
    {
        color: White;
        text-decoration: none;
        height: 30px;
        vertical-align: middle;
        display: table-cell;
        padding-left: 15px;
        width: 253px;
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li:hover
    {
        /* background-color: #415353; */
    }
    .RadMenu_ArtDebutant > ul.rmRootGroup > li.rmItem > a.rmFocused
    {
        background-color: #415353;
        width: 254px;
    }
     
    /* drop down. Some stuff from menu.css base styles */
     
    .RadMenu div.rmSlide
    {
        position:absolute;
        overflow:hidden;
        display:none;
        float:left;
         
        width: 254px;
        background-color: #333333;
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
     
    .RadMenu ul.rmVertical
    {
        float: left;
        display: block;
        list-style-type: none;
        font-size: 17px;
        text-transform: lowercase;
        font-family: Arial Baltic, Arial;
    }
     
    .RadMenu ul.rmVertical > li.rmItem
    {
        clear:both;
        width: 100%;
        height: 40px;
        width: 250px;
        line-height: 40px;
    }
     
    .RadMenu ul.rmVertical > li.rmItem > a.rmLink
    {
        color: White;
        text-transform: uppercase;
        text-decoration:none;
        margin-left: 20px;
    }
    /* drop down portion end */
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Mar 2011 Link to this post

    Hi James Reategui,

    You can take a look at the following help article that explains the different css classes that are applied to the RadMenu: CSS Skin File Selectors. I would also suggest that you downloaded FireBug plug-in for firefox and inspect whichever element you would need.

    Kind regards,
    Kate
    the Telerik team
  3. James Reategui
    James Reategui avatar
    12 posts
    Member since:
    Oct 2008

    Posted 20 Mar 2011 Link to this post

    Yes, I used Firebug to get as far as I did before :) For others with this issue, what solved the issue for me was copying in all of the base stylesheets and then adding my stuff on top.
Back to Top