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.