Align Image next to the Text

Question

This is the image we did using and css. I am trying to implement the same in RAD Menu.

How can I align image right to the text in Radmenuitem ? This image is in my solution.

In this image, hover over the text and image will slide the menu. How can do it in radmenu ?

<telerik:RadMenuItem ID="riComm" runat="server" Text="Communication" BackColor="#333333" CssClass="Cursor"></telerik:RadMenuItem>
<telerik:RadMenuItem ID="riUpcoming" runat="server" Text="Appointment Book" BackColor="#333333" CssClass="Cursor"></telerik:RadMenuItem>

Answer 1

Please try with the below code snippet.

<style>
    .RadMenu .rmLeftImage {
        float: right !important;
    }
</style>
.......
.......
<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Communication" runat="server" ImageUrl="http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/expanddirection/Images/expandDirection/down.png">
            <Items>
                <telerik:RadMenuItem Text="Communication1" runat="server"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Communication2" runat="server"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Appointmnent book" runat="server" ImageUrl="http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/expanddirection/Images/expandDirection/down.png">
            <Items>
                <telerik:RadMenuItem Text="Appointmnent book1" runat="server"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Appointmnent book2" runat="server"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>