ASP.NET 4 Menu Control remove CSS

Question

I have this megamenu in jquery built in a list, but to databind it, I'm using the <asp:menu> control. This specific list, I want to build in the menu control, but the menu control put its own css classes on the markup instead of mine.

link to megamenu: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/options/

I have .net 4 and set rendering mode to list..

What I have tried:

• https://code.google.com/p/aspnetcontroladapters/wiki/Menu
• http://cssfriendly.codeplex.com/
• put !important in all my css
• .net 4 and rendering mode to list

It still puts these AspNet-Menu-Vertical to markup that I want to get rid of.

My list:

<li><a href="test.html">Parent</a>
    <ul>
        <li><a href="#">ParentChild</a>
            <ul>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
                <li><a href="#">Child</a></li>
            </ul>
        </li>
    </ul>
</li>

This is what my hardcoded list renders, a perfect mega menu.

<ul class="mega-menu" id="mega-menu-1">
    <li class="dc-mega-li">
        <a href="./" class="dc-mega">Ögon<span class="dc-mega-icon"></span></a>
        <div class="sub-container mega" style="left: 0px; top: 50px; z-index: 1000;"><ul class="sub" style="display: none;">
            <div class="row" style="width: 720px;"><li class="mega-unit mega-hdr" style="height: 293px;">
                <a href="#" class="mega-hdr-a" style="height: 18px;">Ögonskuggor</a>
                <ul>
                    <li><a href="#">Bas</a></li>
                    <li><a href="#">Luniere</a></li>
                </ul>
            </li>
</div>



        </ul></div>
    </li>
</ul>

My Menu Code

<asp:Menu ID="Menu1" runat="server" RenderingMode="List">
        <Items>
            <asp:MenuItem Text="parent" Value="parent 1">
                <asp:MenuItem Text="parentchild" Value="pchild 1">
                    <asp:MenuItem Text="child" Value="child 1"></asp:MenuItem>
                </asp:MenuItem>
            </asp:MenuItem>
        </Items>
    </asp:Menu>

It renders like this:

<div id="megamenu1" class="AspNet-Menu-Vertical" style="float: left;">
    <ul class="AspNet-Menu static" tabindex="0" style="position: relative; width: auto; float: left;" role="menu">
        <li class="AspNet-Menu-WithChildren has-popup static" aria-haspopup="megamenu1:submenu:2" role="menuitem" style="position: relative;">
            <a class="AspNet-Menu-Link static" href="javascript:__doPostBack('megamenu1','b1')" tabindex="-1">
                Ögon</a>
            <ul id="megamenu1:submenu:2" style="display: none; position: absolute; top: 0px; left: 100%;" class="dynamic">
                <li class="AspNet-Menu-WithChildren has-popup dynamic" aria-haspopup="megamenu1:submenu:3" role="menuitem" style="position: relative;">
                    <a class="AspNet-Menu-Link dynamic" href="javascript:__doPostBack('megamenu1','b1\\2')" tabindex="-1">
                        Ögonskuggor</a>
                    <ul id="megamenu1:submenu:3" style="display: none; position: absolute; top: 0px; left: 100%;" class="dynamic">
                        <li class="AspNet-Menu-Leaf dynamic" role="menuitem" style="position: relative;">
                            <a class="AspNet-Menu-Link dynamic" href="javascript:__doPostBack('megamenu1','b1\\2\\3')" tabindex="-1">
                                Bas</a>
                        </li>
                        <li class="AspNet-Menu-Leaf dynamic" role="menuitem" style="position: relative;">
                            <a class="AspNet-Menu-Link dynamic" href="javascript:__doPostBack('megamenu1','b1\\2\\4')" tabindex="-1">
                                lumiere</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

Please help thanks

Answer 1

I used a repeater to create a clean list instead

    <div>
        <asp:Repeater ID="ParentRepeater" runat="server"  OnItemDataBound="ParentRepeater_OnItemBound">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li><a><%# DataBinder.Eval(Container.DataItem, "ParentCatName") %></a>
                    <asp:Repeater ID="ParentCatRepeater" runat="server"  OnItemDataBound="ChildRepeater_OnItemBound">
                        <HeaderTemplate>
                            <ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <li><a><%# DataBinder.Eval(Container.DataItem, "CategoryName") %></a>
                                <asp:Repeater ID="ChildRepeater" runat="server">
                                    <HeaderTemplate>
                                        <ul>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <li><a><%# DataBinder.Eval(Container.DataItem, "ProductName") %></a></li>
                                    </ItemTemplate>
                                    <FooterTemplate></ul></FooterTemplate>
                                </asp:Repeater>
                            </li>

                        </ItemTemplate>
                        <FooterTemplate></ul></FooterTemplate>
                    </asp:Repeater>
                </li>
            </ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>

    </div>

C#

        protected void Page_Load(object sender, EventArgs e)
    {
        LinqtoDBDataContext db = new LinqtoDBDataContext();

        ParentRepeater.DataSource = db.GetParentCategories();
        ParentRepeater.DataBind();
    }

    protected void ParentRepeater_OnItemBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            dynamic cat = e.Item.DataItem as dynamic;
            int parentcatid = Convert.ToInt32(cat.ParentCatID);

            LinqtoDBDataContext db = new LinqtoDBDataContext();

            //var cats = from c in db.Categories
            //           where c.ParentCatID == parentcatid

            //          select c;

            Repeater ParentCatRepeater = e.Item.FindControl("ParentCatRepeater") as Repeater;
            ParentCatRepeater.DataSource = db.GetCategories(parentcatid);
            ParentCatRepeater.DataBind();
        }
    }

    protected void ChildRepeater_OnItemBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            dynamic prod = e.Item.DataItem as dynamic;
            int catid = Convert.ToInt32(prod.CategoryID);

            LinqtoDBDataContext db = new LinqtoDBDataContext();


            Repeater ChildRepeater = e.Item.FindControl("ChildRepeater") as Repeater;
            ChildRepeater.DataSource = db.GetProductsInCategory(catid);
            ChildRepeater.DataBind();
        }
    }

}

Answer 2

There's a problem with menus rendered as lists. I answered in another post with my solution.

Regards!