How can I disable the Menu control from styling itself in javascript?

I'm using Visual Studio 2010 and ASP.NET 4.0 to render a Menu control as an HTML list so I can style it using CSS. Here is the code I am using below

<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSour开发者_StackOverflowceID="MenuSource" 
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False" 
StaticDisplayLevels="2">
</asp:Menu>

This produces the following HTML

<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>

<div id="navlist">
    <ul>
        <li><a href="link1.html">Link 1</a></li>
        <li><a href="link2.html">Link 2</a></li>
    </ul>
</div>

At first glance this looks like exactly what I wanted. However, if I open up WebResource.axd there is a whole bunch of javascript code related to the menu. Part of this code is applying it's own inline styles to the list. Using FireBug I can view the HTML markup after the javascript has executed and it looks something like this:

<div id="navlist" style="float: left;">
    <ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
        <li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link1.html" class="level2 static" tabindex="-1">Link 1</a>
        </li><li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link2.html" class="level2 static" tabindex="-1">Link 2</a></li>
    </ul>
</div>

These inline styles ultimately affect the layout of my page. I have no need for any of the scripts in WebResource.axd. How can I prevent this script from being rendered in the final markup of the page?

You can tell the menu to NOT style itself if you want to just use the IncludeStyleBlock Attribute

By default its turned on "true"

<asp:Menu IncludeStyleBlock="False" />

On your css use the !important

I've created a custom menu (derived from System.Web.UI.WebControls.Menu) and replaced the OnPreRender:

public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
    protected override void OnPreRender(EventArgs e)
    {
        // Don't call base OnPreRender
        //base.OnPreRender(e);
    }
}

That did the trick.

You can't do much to change the out-of-the-box functionality of the Menu control. However, you could either create your own control or use the CSS Control Adapter Toolkit.

I tried to override the asp:menu with a custom class, but still haven't learned how to simply remove all attributes from the ul, li, and a tags so that I could apply my own css code to a clean list.

Imports Microsoft.VisualBasic
Namespace MCO

Public Class MyCustomMenu
    Inherits Menu

        Protected Overrides Sub OnPreRender(e As EventArgs)
            ' don't use this:
            ' MyBase.OnPreRender(e)

            ' but leaving this blank produces NO rendered menu
        End Sub
    End Class
End Namespace

I have also tried the jQuery method:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

But because the .net webresource is the last thing to run, I found that jQuery line didn't work. It should, but doesn't. :(

I managed this by removing inline styles and changing some class names via jQuery. Of course you can re-style every element but it just produces a lot of unnecessary css code.

Use this, if you want to remove those inline styles from li, a, ul and divs:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

Second you can change those class names e.g.:

$("#from-this-element").removeClass(.remove-me).addClass('.new-class');

And I think it's the best way to use this script after the page has loaded.