Formatting of RadMenu

[Kurt Kluth]

We have a menu system that is being developed for our primary websites.  I have been unsuccessful in my attempts to implement it into an internal site.  Thus I have decided to try and use the RadMenu.  From the attached screenshots you can see that I almost have this and can't get the remainder figured out. 

GoodMenu.png and SelectedMenu.png is my end goal of what I am trying to get too. 
RadMenu.png is what I currently have. 

How can I achieve the following?
1. On hover of the top level I am unable to get it to change from the radiant purple to the green. 
2. Also is there anyway to change the text color on the top level from white to green when the user is in that section.  ie. if user hovers over "Data Submission", it will turn the background color green (#6d9c1f).  If they click "Data Submission" or any of the links below it, the font color would turn from white to green. 
3. Reduce the size of the boarder around the sub-menu's? 


I tried using the Visual Style Builder but found it not to work as I had hoped.

Snippet of ASPX code

<telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
    EnableRoundedCorners="True" EnableShadows="True" EnableTextHTMLEncoding="True"
    style="z-index:2900" cssclass="RadMenu_ASI">
    <Items>
        <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/default.aspx"
            Text="Data Submission">
            <Items>
                <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/fsDefault.aspx"
                    Text="Add, Edit, or View Your Financial Statement">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/dataUpload.aspx?format=NCUA"
                    Text="Upload Form 5300">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/dataUpload.aspx?format=INS"
                    Text="Upload Excess Insured Accounts File">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/InsDescription.aspx"
                    Text="Excess Insured Account File Layout">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server"
            NavigateUrl="~/premiumPayments/default.aspx" Text="Premium Payment System">
            <Items>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/premiumPayments/demo/SlideShow.aspx"
                    Text="Demo - Premium Payment System ">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" NavigateUrl="~/premiumPayments/pps.aspx"
                    Text="Premium Payment System Login ">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>

</telerik:RadMenu>

Snippet of css

/* RAD MENU STYLE */

.RadMenu_ASI .rmRootGroup,.RadMenu_ASI a.rmLink,.RadMenu_ASI .rmGroup .rmText,.RadMenu_ASI .rmVertical .rmText,.RadMenu_ASI .rmLeftArrow,.RadMenu_ASI .rmRightArrow,.RadMenu_ASI .rmTopArrow,.RadMenu_ASI .rmBottomArrow{background-image:url('Menu/rmSprite.png');background-color:transparent}

.RadMenu_ASI .rmRootGroup{border:1px solid #828282;background-repeat:repeat-x;background-position:0 -408px;background-color:#e6e6e6}

.RadMenu_ASI,.RadMenu_ASI a.rmLink{font:normal 12px/23px "Segoe UI",Arial,sans-serif;color:#000;text-decoration:none}

.RadMenu_ASI a.rmLink,.RadMenu_ASI a.rmDisabled,.RadMenu_ASI a.rmDisabled:hover{background-position:0 -72px}

.RadMenu_ASI .rmFirst a.rmLink,.RadMenu_ASI .rmFirst a.rmLink:hover,.RadMenu_ASI .rmLast .rmText,.RadMenu_ASI .rmLast a.rmLink:hover .rmText,.RadMenu_ASI .rmVertical a.rmLink,.RadMenu_ASI .rmVertical .rmText{background-repeat:no-repeat;background-position:0 500px}

.RadMenu_ASI .rmVertical .rmFirst,.RadMenu_ASI .rmVertical .rmLast{background:0}

.RadMenu_ASI a.rmLink:hover,.RadMenu_ASI a.rmFocused,.RadMenu_ASI a.rmSelected{background-color:#fff}

.RadMenu_ASI .rmHorizontal .rmRootLink span.rmText{display:inline;padding-left:12px}

.RadMenu_ASI_rtl .rmRootLink span.rmText{padding-right:12px}

.RadMenu_ASI_Context_rtl .rmRootLink span.rmText{padding-right:28px}

.RadMenu_ASI .rmHorizontal a.rmRootLink{padding-left:0}

.RadMenu_ASI_rtl a.rmRootLink{margin-left:0;padding:0}

.RadMenu_ASI .rmHorizontal .rmItem>a.rmRootLink{width:100%}

.RadMenu_ASI ul.rmHorizontal .rmLeftImage{margin:4px -4px 0 6px}

.RadMenu_ASI_rtl ul.rmHorizontal .rmLeftImage{margin:4px 6px 0 -4px}

.RadMenu_ASI .rmVertical a.rmLink{padding-top:1px;padding-bottom:1px}

.RadMenu_ASI .rmVertical a.rmLink:hover,.RadMenu_ASI .rmVertical a.rmFocused,.RadMenu_ASI .rmVertical a.rmSelected,.RadMenu_ASI .rmVertical a.rmExpanded,.RadMenu_ASI .rmVertical a.rmExpanded:hover{padding-top:0;padding-bottom:0;border-style:solid;border-color:#828282;border-width:1px 0}

.RadMenu_ASI .rmVertical .rmFirst a.rmLink:hover,.RadMenu_ASI .rmVertical .rmFirst a.rmFocused,.RadMenu_ASI .rmVertical .rmFirst a.rmSelected,.RadMenu_ASI .rmVertical .rmFirst a.rmExpanded,.RadMenu_ASI .rmVertical .rmFirst a.rmExpanded:hover{padding-top:1px;padding-bottom:0;border-top-width:0}.RadMenu_ASI .rmVertical .rmLast a.rmLink:hover,.RadMenu_ASI .rmVertical .rmLast a.rmFocused,.RadMenu_ASI .rmVertical .rmLast a.rmSelected,.RadMenu_ASI .rmVertical .rmLast a.rmExpanded,.RadMenu_ASI .rmVertical .rmLast a.rmExpanded:hover{padding-bottom:1px;padding-top:0;border-bottom-width:0}.RadMenu_ASI .rmVertical .rmItem a.rmDisabled:hover{padding-top:1px;padding-bottom:1px;border-width:0}.RadMenu_ASI a.rmExpanded,.RadMenu_ASI a.rmExpanded:hover{background-color:#fff}.RadMenu_ASI a.rmDisabled,.RadMenu_ASI a.rmDisabled:hover{color:#7d7d7d;background-color:transparent}.RadMenu_ASI .rmGroup,.RadMenu_ASI .rmMultiColumn,.RadMenu_ASI .rmGroup .rmVertical{border:1px solid #979797;background:white url('Menu/rmVSprite.png') repeat-y 0 0}.RadMenu_ASI .rmTopFix,.RadMenu_ASI .rmBottomFix,.RadMenu_ASI .rmRoundedCorners .rmGroup .rmItem,.RadMenu_ASI .rmRoundedCorners li.rmFirstGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners ul.rmHorizontal .rmFirst,.RadMenu_ASI_Context.rmRoundedCorners .rmGroup .rmItem,.RadMenu_ASI_Context.rmRoundedCorners ul.rmHorizontal .rmFirst{background-image:url('Menu/rmVSprite.png');background-color:#fff;background-repeat:repeat-y}* html .rmRoundedCorners_ASI .rmGroup .rmItem,* html .rmRoundedCorners_ASI ul.rmHorizontal .rmFirst{background-image:url('Menu/rmVSprite.png');background-color:#fff;background-repeat:repeat-y}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmGroup,.RadMenu_ASI .rmRoundedCorners .rmScrollWrap .rmItem,.RadMenu_ASI .rmRoundedCorners .rmGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmHorizontal .rmItem,.RadMenu_ASI .rmRoundedCorners .rmScrollWrap .rmVertical,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrap .rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmHorizontal .rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrap .rmVertical{background-image:none}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmGroup,* html .rmRoundedCorners_ASI .rmScrollWrap .rmItem,* html .rmRoundedCorners_ASI .rmHorizontal .rmItem,* html .rmRoundedCorners_ASI .rmScrollWrap .rmVertical{background-image:none}.RadMenu_ASI .rmRoundedCorners .rmGroupColumn{background-color:#fff}.RadMenu_ASI .rmBottomLeft,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI_Context.rmRoundedCorners ul.rmGroup,.RadMenu_ASI .rmRoundedCorners ul.rmGroup,.RadMenu_ASI .rmRoundedCorners .rmMultiColumn{background-image:url('Menu/rmRoundedLeft.png');background-color:transparent;background-repeat:no-repeat}* html .rmRoundedCorners_ASI .rmScrollWrapContainer,* html .rmRoundedCorners_ASI .rmGroup ul.rmGroup,* html .rmRoundedCorners_ASI ul.rmGroup{background-image:url('Menu/rmRoundedLeft.png');background-color:transparent;background-repeat:no-repeat}.RadMenu_ASI .rmTopRight,.RadMenu_ASI .rmBottomRight{background-image:url('Menu/rmRoundedRight.png');background-color:transparent;background-repeat:no-repeat}.RadMenu_ASI .rmTopFix,.RadMenu_ASI .rmBottomFix,.RadMenu_ASI .rmRoundedCorners .rmGroup .rmFirst,.RadMenu_ASI_Context.rmRoundedCorners .rmGroup .rmFirst,.rmRoundedCorners_ASI .rmGroup .rmFirst{border-color:#979797}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix{background:#FFF}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmTopFix,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmBottomFix{background:#FFF}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow{background-color:#FFF;border:0}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmTopArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmBottomArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmLeftArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmRightArrow{background-color:#FFF;border:0}.RadMenu_ASI_rtl .rmBottomLeft,.RadMenu_ASI_rtl .rmRoundedCorners ul.rmGroup,.RadMenu_ASI_rtl .rmRoundedCorners .rmMultiColumn,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI .rmScrollWrapContainer .rmBottomLeft,.rmRoundedCorners.RadMenu_ASI_Context_rtl ul.rmGroup,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer{background-image:url('Menu/rmRoundedLeft_rtl.png')}.RadMenu_ASI_rtl .rmTopRight,.RadMenu_ASI_rtl .rmBottomRight{background-image:url('Menu/rmRoundedRight_rtl.png')}.RadMenu_ASI_rtl li.rmTopFix,.RadMenu_ASI_rtl li.rmBottomFix,.RadMenu_ASI_rtl .rmRoundedCorners .rmGroup .rmItem,.rmRoundedCorners.RadMenu_ASI_Context_rtl .rmGroup .rmItem{background-position:101% 0}.RadMenu_ASI .rmSlide .rmScrollWrap{background-image:none}.RadMenu_ASI_rtl .rmGroup,.RadMenu_ASI_rtl .rmMultiColumn,.RadMenu_ASI_rtl .rmGroup .rmVertical{background-position:100% 0}.RadMenu_ASI .rmRootGroup li.rmItem .rmGroup{padding-bottom:0}.RadMenu_ASI .rmRootGroup .rmHorizontal{background-image:none}.RadMenu_ASI .rmScrollWrap .rmVertical{border:0}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer li.rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,.rmRoundedCorners_ASI .rmScrollWrapContainer li.rmItem{background:0}.RadMenu_ASI .rmGroup .rmItem a.rmLink,.RadMenu_ASI .rmGroup .rmItem a.rmLink:hover,.RadMenu_ASI .rmGroup .rmItem a.rmFocused,.RadMenu_ASI .rmGroup .rmItem a.rmSelected,.RadMenu_ASI .rmGroup .rmItem a.rmExpanded{padding-top:0;padding-bottom:0;border:0}.RadMenu_ASI .rmGroup .rmLast a.rmLink,.RadMenu_ASI .rmGroup .rmLast a.rmLink:hover,.RadMenu_ASI .rmGroup .rmLast a.rmFocused,.RadMenu_ASI .rmGroup .rmLast a.rmSelected,.RadMenu_ASI .rmGroup .rmLast a.rmExpanded{padding-bottom:1px}.RadMenu_ASI .rmGroup a.rmLink,.RadMenu_ASI .rmGroup .rmText,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled .rmText,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover .rmText{background-position:0 500px;background-repeat:no-repeat;background-color:transparent}.RadMenu_ASI .rmGroup a.rmLink:hover,.RadMenu_ASI .rmGroup a.rmFocused,.RadMenu_ASI .rmGroup a.rmSelected,.RadMenu_ASI .rmGroup a.rmExpanded{background-position:0 -168px}.RadMenu_ASI .rmGroup a.rmLink:hover .rmText,.RadMenu_ASI .rmGroup a.rmFocused .rmText,.RadMenu_ASI .rmGroup a.rmSelected .rmText,.RadMenu_ASI .rmGroup a.rmExpanded .rmText{background-position:100% -192px}.RadMenu_ASI .rmRootGroup .rmExpandRight,.RadMenu_ASI .rmGroup .rmExpandDown,.RadMenu_ASI_Context .rmGroup .rmExpandRight,.RadMenu_ASI .rmRootGroup .rmItem a.rmDisabled .rmExpandRight,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled .rmExpandDown,.RadMenu_ASI .rmRootGroup .rmItem a.rmDisabled:hover .rmExpandRight,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown{background-position:100% -216px}.RadMenu_ASI a.rmLink:hover .rmExpandRight,.RadMenu_ASI .rmLast a.rmLink:hover .rmExpandRight,.RadMenu_ASI a.rmFocused .rmExpandRight,.RadMenu_ASI a.rmSelected .rmExpandRight,.RadMenu_ASI a.rmExpanded .rmExpandRight{background-position:100% -312px}.RadMenu_ASI .rmGroup a.rmLink:hover .rmExpandRight,.RadMenu_ASI .rmGroup a.rmFocused .rmExpandRight,.RadMenu_ASI .rmGroup a.rmSelected .rmExpandRight,.RadMenu_ASI .rmGroup a.rmExpanded .rmExpandRight,.RadMenu_ASI .rmGroup a.rmLink:hover .rmExpandDown,.RadMenu_ASI .rmGroup a.rmFocused .rmExpandDown,.RadMenu_ASI .rmGroup a.rmSelected .rmExpandDown,.RadMenu_ASI .rmGroup a.rmExpanded .rmExpandDown{background-position:100% -240px}.RadMenu_ASI .rmRootGroup a.rmDisabled:hover .rmExpandRight,.RadMenu_ASI .rmGroup a.rmDisabled:hover .rmExpandDown{background-image:url('Menu/rmSprite.png');background-position:100% -216px}.RadMenu_ASI_rtl a.rmLink,.RadMenu_ASI_rtl .rmRootGroup a.rmDisabled{background-position:100% -96px}.RadMenu_ASI_rtl .rmGroup a.rmDisabled{background:0}.RadMenu_ASI_rtl .rmText{background-position:0 -96px}.RadMenu_ASI_rtl .rmVertical a.rmExpanded .rmText,.RadMenu_ASI_rtl .rmVertical a.rmExpanded:hover .rmText{background-position:0 500px;background-repeat:no-repeat}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover,.RadMenu_ASI_rtl .rmGroup a.rmFocused,.RadMenu_ASI_rtl .rmGroup a.rmSelected,.RadMenu_ASI_rtl .rmGroup a.rmExpanded{background-position:100% -264px}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover .rmText,.RadMenu_ASI_rtl .rmGroup a.rmFocused .rmText,.RadMenu_ASI_rtl .rmGroup a.rmSelected .rmText,.RadMenu_ASI_rtl .rmGroup a.rmExpanded .rmText{background-position:0 -288px}.RadMenu_ASI_Context_rtl .rmVertical .rmExpandLeft,.RadMenu_ASI_rtl .rmRootGroup .rmExpandLeft{background-position:0 -312px}.RadMenu_ASI_rtl .rmVertical a.rmLink:hover .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmFocused .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmSelected .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmExpanded .rmExpandLeft{background-position:0 -216px}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmFocused .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmSelected .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmExpanded .rmExpandLeft{background-position:0 -336px}.RadMenu_ASI_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft{background-position:0 -312px}.RadMenu_ASI .rmSlide{margin:0 0 0 -1px}.RadMenu_ASI .rmVertical .rmSlide,.RadMenu_ASI .rmSlide .rmSlide,.RadMenu_ASI_Context .rmGroup .rmSlide{margin:0 0 0 -5px}.RadMenu_ASI_rtl .rmSlide{margin:0}.RadMenu_ASI_rtl .rmFirst .rmSlide{margin-left:1px}.RadMenu_ASI_rtl .rmVertical .rmSlide,.RadMenu_ASI_rtl .rmSlide .rmSlide,.RadMenu_ASI_Context_rtl .rmGroup .rmSlide{margin:0 0 0 5px}.RadMenu_ASI .rmLeftArrow,.RadMenu_ASI .rmRightArrow{background-color:#E6E6E6}.RadMenu_ASI .rmLeftArrow{background-position:-8px -312px;border-right:1px solid #828282}.RadMenu_ASI .rmRightArrow{background-position:-482px -216px;border-left:1px solid #828282}.RadMenu_ASI .rmTopArrow,.RadMenu_ASI .rmBottomArrow,.RadMenu_ASI .rmGroup .rmLeftArrow,.RadMenu_ASI .rmGroup .rmRightArrow{background-color:#E6E6E6}.RadMenu_ASI .rmTopArrow{background-position:50% -367px;border-bottom:1px solid #828282}.RadMenu_ASI .rmBottomArrow{background-position:50% -391px;border-top:1px solid #828282}.RadMenu_ASI .rmHorizontal .rmSeparator .rmText,.RadMenu_ASI .rmVertical .rmHorizontal .rmSeparator .rmText{height:22px;margin:1px 0 0;width:1px;background-color:#A8A8A8}

.RadMenu_ASI_Context .rmSeparator .rmText,.RadMenu_ASI .rmHorizontal .rmGroup .rmSeparator .rmText,.RadMenu_ASI .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText{background-color:transparent;background-position:0 -406px}

 

 DIV.RadMenu_ASI .rmItem .rmLink {

    FONT-SIZE: 14px;

    font-family: Crete Round !important;

    BACKGROUND-IMAGE: none;

    /*BACKGROUND-POSITION: 0px 500px;*/

    FONT-WEIGHT: normal;

    COLOR: #FFFFFF;

    LINE-HEIGHT: 50px;

    BACKGROUND-COLOR: #001F45;

}

 

 DIV.RadMenu_ASI .rmItem .rmLink:hover {

    FONT-WEIGHT: bold;

}

 

 DIV.RadMenu_ASI .rmItem .rmLink:hover .rmText {

    BACKGROUND-IMAGE: none;

}

 

 DIV.RadMenu_ASI .rmItem .rmLink .rmExpandDown {

    FONT-WEIGHT: normal;

    /*BACKGROUND-COLOR: #6D9C1F;*/

    background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%) !important ;

}

 

 DIV.RadMenu_ASI .rmItem .rmGroup {

    BACKGROUND-IMAGE: none;

}

 

 DIV.RadMenu_ASI .rmGroup .rmItem .rmLink {

    BACKGROUND-COLOR: #6D9C1F;

}

 

 DIV.RadMenu_ASI .rmGroup .rmItem .rmLink:hover {

    FONT-WEIGHT: bold;

    BACKGROUND-COLOR: #87AE47;

}
        

[Kurt Kluth]

I got the menu working like it should, however I am now perplexed on how to solve one last problem. 

There is a almost like an "invisible" border or cell padding surrounding the expanded menu items.  How do I go about turning this off so the group is right below the rootgroup? 

Also is there anyway of shrinking the line height of submenu's?  ie. "Add, Edit, or View your financial statement", "Upload Form 5300".  I want the main rootGroup to be 50px high but the sub's to be smaller.

See picture for specifics.

[Kate]

Hi Kurt,

I tested the code that you provided in your first post and I get the result demonstrated in the attached image file. Let me know on the changes that you included in order to get the look that you demonstrate on your last post.

Regards,
Kate
Telerik

[Kurt Kluth]

Kate,

That thought did cross my mind that I should have provided further code.  Here you are.

RadGridMenu: 

<telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
    EnableRoundedCorners="True" EnableShadows="False" EnableTextHTMLEncoding="True"
    style="z-index:2900;" cssclass="RadMenu_ASI" EnableEmbeddedSkins="false">
    <Items>
        <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/default.aspx"
            Text="Data Submission">
            <Items>
                <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/fsDefault.aspx"
                    Text="Add, Edit, or View Your Financial Statement">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/dataUpload.aspx?format=NCUA"
                    Text="Upload Form 5300">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/dataUpload.aspx?format=INS"
                    Text="Upload Excess Insured Accounts File">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/finStatement/InsDescription.aspx"
                    Text="Excess Insured Account File Layout">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server"
            NavigateUrl="~/premiumPayments/default.aspx" Text="Premium Payment System">
            <Items>
                <telerik:RadMenuItem runat="server"
                    NavigateUrl="~/premiumPayments/demo/SlideShow.aspx"
                    Text="Demo - Premium Payment System ">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" NavigateUrl="~/premiumPayments/pps.aspx"
                    Text="Premium Payment System Login ">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>

</telerik:RadMenu>

CSS:

DIV.RadMenu_ASI .rmRootGroup
{
    Background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%) !important ;
}

DIV.RadMenu_ASI .rmRootGroup .rmLink
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    LINE-HEIGHT: 50px !important;
    BACKGROUND-IMAGE: none;
}

DIV.RadMenu_ASI .rmRootGroup .rmText
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    LINE-HEIGHT: 50px !important;
    BACKGROUND-IMAGE: none;
}

DIV.RadMenu_ASI .rmRootGroup .rmLink:hover
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    LINE-HEIGHT: 50px !important;
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}

DIV.RadMenu_ASI .rmRootGroup .rmExpanded
{
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}

DIV.RadMenu_ASI .rmGroup .rmItem
{
    border: 10px 10px 1px 1px solid #ffffff !important;
    line-height: 20px !important;
}

DIV.RadMenu_ASI .rmGroup .rmLink
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}

DIV.RadMenu_ASI .rmGroup .rmLink:hover
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    BACKGROUND-IMAGE: none;
    background-color: #87AE47 !important;
    width: 90%;
}

[Shinu]

Hi Kury

Try setting the following CSS and I have attached a screenshot as well.
Check the attached screenshot hope this is what you want
CSS:

<style type="text/css">
 .rmRoundedCorners ul.rmGroup
  {
    padding: 0px !important;
    margin-top: 0px !important;
  }
</style>

Thanks
Shinu

[Kurt Kluth]

That worked, now how do I get rid of the bar at the bottom?

Tried adding and it didn't seem to make a difference.

margin-bottom: 0px !important;

[Kate]

Hi Kurt,

To resolve the issue that you are currently experiencing you will need to disable the rounded corners and the shadows of the RadMenu (EnableRoundedCorners="false" EnableShadows="false") and you can also use the following css class selector (you will need to change the name of the skin in case you use any other than the Sunset skin):

div.RadMenu_Sunset .rmGroup,
div.RadMenu_Sunset .rmMultiColumn,
div.RadMenu_Sunset .rmGroup .rmVertical {
            border: 0 solid #958A85;
        }

Regards,
Kate
Telerik