I have a menu that I want to change the direction of the arrow to rtl. this is my code:
<div>
<div class="sidebar-menu">
<div dir="rtl">
<asp:Menu ID="Menu1" runat="server" BackColor="#303641" BorderColor="303641" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" Orientation="Vertical" Font-Size="Medium" VerticalPadding="5px">
<DynamicHoverStyle BackColor="#303641" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" BorderColor="Black" Font-Size="Large" />
<DynamicMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" Font-Size="Small" VerticalPadding="5px" />
<DynamicMenuStyle BackColor="#303641" Height="50px" Width="150px" BorderColor="Black" VerticalPadding="5px" />
<DynamicSelectedStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" VerticalPadding="5px" />
<Items>
<asp:MenuItem Text="راهنما" Value="راهنما"></asp:MenuItem>
<asp:MenuItem Text="مدیریت آموزش" Value="مدیریت آموزش">
<asp:MenuItem Text="واحد درسی" Value="واحد درسی"></asp:MenuItem>
<asp:MenuItem Text="مدیریت انسانی" Value="مدیریت انسانی">
<asp:MenuItem Text="فرد" Value="فرد">
<asp:MenuItem Text="تعریف فرد" Value="تعریف فرد"></asp:MenuItem>
<asp:MenuItem Text="مدیریت فرد" Value="مدیریت فرد"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="دانشجو" Value="دانشجو">
<asp:MenuItem Text="تعریف دانشجو" Value="تعریف دانشجو"></asp:MenuItem>
<asp:MenuItem Text="مدیریت دانشجو" Value="مدیریت دانشجو"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="استاد" Value="استاد">
<asp:MenuItem Text="تعریف استاد" Value="تعریف استاد"></asp:MenuItem>
<asp:MenuItem Text="مدیریت استاد" Value="مدیریت استاد"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
<asp:MenuItem Text="گزارشگیری" Value="گزارشگیری"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
<asp:MenuItem Text="گزارشگیری" Value="گزارشگیری">
<asp:MenuItem Text="لیست حضور و غیاب" Value="لیست حضور و غیاب"></asp:MenuItem>
<asp:MenuItem Text="حضور و غیاب جلسه امتحان" Value="حضور و غیاب جلسه امتحان"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyle Font-Names="Segoe UI" ForeColor="White" BackColor="#303641" BorderColor="Black" Height="50px" Width="100px" />
<StaticMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" Height="50px" Width="100px" />
<StaticMenuStyle BackColor="#303641" BorderColor="Black" Height="50px" Width="100px" />
<StaticSelectedStyle BackColor="303641" BorderColor="#333333" Font-Names="Segoe UI" ForeColor="#FFFFCC" Height="50px" Width="100px" />
</asp:Menu>
</div>
</div>
.sidebar-menu {
position:center;
float: left;
width: 200px;
top: 0;
right: 0;
bottom: 0;
background-color: #303641;
color: #aaabae;
font-family: "Segoe UI";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
direction:rtl;
text-align:right;
padding-right:10px;
}
how can I change the direction of the menu arrow?