Remove borders from Menu

[Kai]

HI all,
I want to create a dropdown menu like this one from Microsofts Ajax Control Toolkit. I think RadMenu might be the best one to use, right? But how could I then remove the border around the Main Menu? I've checked the forum, KB and RadMenu CSS Description but I could not find it. Any ideas?
Many thanks in advance!

[Cori]

Hello Kai,

I think the control you're looking for is the RadContextMenu. It looks just like the example you made mention.

I hope that helps.

[Kai]

Hi Cori,
thanks for your reply, but it seems that for the context menu I always have to use right-click. That's not easy to understand for the users. So the default RadMenu is already very close to the aim, only the border needs to be removed.

I already thought about addint a small icon at the end of the text and using Popup Menu with it (the example on the right in the demo section) but as I have to add it to a Sharepoint 2007 Webpart I'd like to avoid usage of JavaScript if possible.

So currently I still prefer the RadMenu but hope to remove the borders...

Thanks
Kai

[Peter]

Hi Kai,

You can remove the border around RadMenu with the following css rule:

.rmRootGroup
   {
       border:none !important;
   }

Regards,
Peter
the Telerik team

[Kai]

Works fine as expected. Thanks a lot, Peter!!

[Ken]

Hi Peter,

The CSS override you gave above works great for removing the border from around the top level menu entries, but when you roll over the individual entries there are still bits of border showing up.  Can you please tell me how to override that?  To see an example of the behavior you can visit http://testbed.dragocactoid.com (the top menu is the radmenu that will be replacing the asp menu below it).

Thanks,
Ken

[Yana]

Hi Ken,

Please add also the following css styles to the page:

.RadMenu_Default .rmVertical a.rmLink:hover,
.RadMenu_Default .rmVertical a.rmFocused,
.RadMenu_Default .rmVertical a.rmSelected,
.RadMenu_Default .rmVertical a.rmExpanded,
.RadMenu_Default .rmVertical a.rmExpanded:hover {
   border:0 !important;
   padding-bottom:1px !important;
   padding-top:1px !important;
}

Regards,
Yana
the Telerik team

[Ken]

Thank you; that fixed it perfectly.
-Ken