将bootstrap菜单转换为asp.net菜单控件

Question

虽然这个问题已被多次询问，但我想再问这个问题。 我想将以下引导程序模板的菜单转换为ASP.net菜单控件。

https://w3layouts.com/preview/?l=/smart-bazaar-e-commerce-shopping-category-bootstrap-responsive-web-template/

我只是将部分菜单放在下面

<div class="w3ls-header-right">
    <ul>
        <li class="dropdown head-dpdn">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user" aria-hidden="true"></i> My Account<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="login.html">Login </a></li> 
                <li><a href="signup.html">Sign Up</a></li> 
                <li><a href="login.html">My Orders</a></li>  
                <li><a href="login.html">Wallet</a></li> 
            </ul> 
        </li> 
    <ul>
<\div>

ASP.NET菜单控件

<ul>
    <li class="dropdown head-dpdn">         
        <asp:Menu ID="menu" runat="server" Orientation="Horizontal" CssClass="dropdown-toggle" >
            <Items>
                <asp:MenuItem Text="Products" Value="second">
                    <asp:MenuItem Text="IT Accessories" Value="IT Accessories" NavigateUrl="~/Product1.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="Clothes" Value="Clothes" NavigateUrl="~/Product2.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="Product 3" Value="Miscellaneous" NavigateUrl="~/Product3.aspx"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="Products" Value="second"></asp:MenuItem>
                <asp:MenuItem Text="Products" Value="second"></asp:MenuItem>
                <asp:MenuItem Text="Products" Value="second"></asp:MenuItem>
                <asp:MenuItem Text="Products" Value="second"></asp:MenuItem>
            </Items>                            
        </asp:Menu>
    </li>
</ul>

尽管我做了多次努力，但没有将代码置于正确的格式中而道歉......

请告诉我有关我的问题的解决方案......我如何以特定顺序使用所有这些CSS来完成功能。