Align submenu in menu control to left of menu item in ASP.Net

I have a menu control which is displaying to right most of the page. Now the submenu items are not displayed since the submenu items are showing right of the menu control.

I want to show the submenu items to the left of the parent menu control and a arrow sign of downword direction. How can I achieve that.

<div style="height: 10px;">
        <asp:Menu ID="menuSettings" runat="server" CssClass="menusetting">
        
            <Items>
                <asp:MenuItem Text="MenuItem1" Value="MenuItem1">
                    <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
                    <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
    </div>


css 

.menusetting
{
    float: right !important;
    width: auto;
}