Asp Menu Adds its own classes

I would like to make my asp menu look just like this - Fiddle

ASPX:


<div id="container">
  <nav>
    <asp:Menu ID="menubar" runat="server" Orientation="horizontal"
     includestyleblock="false" onmenuitemdatabound="somefunction"
     datasourceid="sitemapdatasource1"></asp:Menu>
  </nav>
</div>
<asp:sitemapdatasource id="sitemapdatasource1" runat="server"
 showstartingnode="false"/>

The css is exactly the same as in the fiddle.

Rendered HTML:

<div id="container">
 <nav>
  <a href="#ContentPlaceHolder1_menubar_SkipLink"><img
   alt="skip navigation links" src="" width="0" height="0"
   style="border-width:0px;"/></a>
 <div id="contentplaceholder_menubar">
 <ul class="level1">
  <li><a class="level1 selected" href="/Home.aspx"</a></li>
  <li><a>Folio</a>
     <ul class="level2">
        <li><a>People</a>
          <ul class="level3">
            <li a class="level3" href="">Men</a></li> 

ISSUES: Quite a few. To start with, you can see, the menu applies its own classes -level1,2,3. (I suspect this could be the reason for all these)

Why is there an uninvited padding inside the 'container'. I dont see it in the fiddle though. As I said, I am using exactly the same css.(see pic)

The animations for the submenu & sub-sub menus are not applying.

Plz check the fiddle. When hovered on submenu items, there is a light blue bg for them. But here, if i hover over 'Nature', i get that bgcolor, but after that when I hover over 'People' no bgcolor for it and its sub-sub menus. Hope im making sense.

I tried writing classes for level1 etc but its so hard as to what goes where. And Also setting RenderingMode property to list, default and table.

could someone please look into this

Using the menu singifies that you want to use the built-in menu support which has some CSS classes and such attached as you’ve found out. You probably want to look at using a HeirarchcalList control then – that will generate a pretty clean structure.