Dropdown portion of CSS

[James Reategui]

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 */

[Kate]

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

[James Reategui]

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.