How to change the Class name in asp.net menu

See more:

C#

ASP.NET

XML

C#4.0

menu

Dear Experts,

I am doing an Asp.net project, And i am new in asp.net menu control..
I am populating the menu items using XML file..

And it is working fine... and i have to customize some items in it...

After run my project i took my page source
Here is the below page source.

<section class="navigable">

<a href="#Demomenu_ZS_SM_Menu_SkipLink" style="removed:absolute;removed-10000px;removedauto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a><div id="Demomenu_ZS_SM_Menu">
    <ul class="level1">
        <li>
            <a class="popout level1" href="#"  önclick="__doPostBack('ctl00$Demomenu$ZS_SM_Menu','Main styles')">Main styles</a>
                <ul class="level2">
                    <li>
                        <a class="level2" href="UserControls/typography.html">Typography</a>
                    </li>
                    <li>
                        <a class="level2" href="UserControls/columns.html">Columns</a>
                    </li>
                    <li>
                        <a class="level2" href="UserControls/tables.html">Tabless</a>
                    </li>
                    <li>
                        <a class="level2" href="UserControls/colors.html">Colors & backgrounds</a>
                    </li>
                </ul>
        </li>
        <li>
            <a class="popout level1" href="#"  önclick="__doPostBack('ctl00$Demomenu$ZS_SM_Menu','Main features')">Main features</a>
                <ul class="level2">
                    <li>
                        <a class="level2" href="UserControls/auto-setup.html">Automatic setup</a>
                    </li>
                    <li>
                        <a class="level2" href="UserControls/responsive.html">Responsiveness</a>
                    </li>
                    <li>
                        <a class="level2" href="UserControls/tabs.html">Tabs</a>
                    </li>
                </ul>

        </li>
        <li>
            <a class="level1" href="UserControls/ajax-demo/submenu.html">With ajax sub-menu</a>
        </li>
    </ul>
</div><a id="Demomenu_ZS_SM_Menu_SkipLink"></a>



</section>

Here is the First ul tag contains the default class

class="level1"

I need to change the classname to "Bigcol"

like wise need to change the inner li class

Here is my XML

<Items>
  <MenuItem NavigationUrl ="" Text="Main styles">
    <MenuItem NavigationUrl ="typography.html" Text="Typography"></MenuItem>
    <MenuItem NavigationUrl ="columns.html" Text="Columns"></MenuItem>
    <MenuItem NavigationUrl ="tables.html" Text="Tabless"></MenuItem>
    <MenuItem NavigationUrl ="colors.html" Text="Colors & backgrounds"></MenuItem>
  </MenuItem>

  <MenuItem NavigationUrl ="" Text="Main features">
    <MenuItem NavigationUrl ="auto-setup.html" Text="Automatic setup"></MenuItem>
    <MenuItem NavigationUrl ="responsive.html" Text="Responsiveness"></MenuItem>
    <MenuItem NavigationUrl ="tabs.html" Text="Tabs"></MenuItem>
  </MenuItem>
  <MenuItem NavigationUrl ="ajax-demo/submenu.html" Text="With ajax sub-menu"></MenuItem>
</Items>

Here is my asp.net control

<asp:XmlDataSource ID="XmlDataSource1" DataFile="~/zybomenu.xml" XPath="/Items/MenuItem" runat="server"></asp:XmlDataSource>


           <asp:Menu ID="ZyboSoft_SM_Menu" DataSourceID="XmlDataSource1" runat="server">
               <DynamicMenuItemStyle CssClass="big-menu"/>
               <DataBindings>
                   <asp:MenuItemBinding DataMember="MenuItem" TextField="Text" NavigateUrlField="NavigationUrl"/>
               </DataBindings>
           </asp:Menu>

Please help me to solve this issue.

Thanks and Regards,

Dileep.....