C# 使用标准css设置ASP.NET菜单控件的样式

我有一段HTML，看起来像这样-

<div id="moduleList">
<ul>
    <li class="noBorder">&nbsp;</li>
                    <li class="noBorder">
        <span class="currentTabLeft">&nbsp;</span><span class="currentTab">
            <a href="Welcome.aspx"
                id="grouptab_0">Home</a>
        </span><span class="currentTabRight">&nbsp;</span>

                </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Locations.aspx">Locations</a>
        </span><span class="notCurrentTabRight">&nbsp;

    </span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">

        <a href="Users.aspx" 
            id="grouptab_2">Users</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Reports.aspx" 
            id="grouptab_3">Reports</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Alerts.aspx" 
            id="grouptab_4">Alerts</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
             <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Preferences.aspx" 
            id="grouptab_5">Preferences</a>

        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

    </ul>

</div>

    #moduleList {
        background-image:url(images/tabRowGrayBg.gif);
        background-repeat:repeat-x;
        border-bottom-color:#565656
    }
    #moduleList>ul>li {
        background-image:url(images/otherTabGray.gif)
    }
    #moduleList ul li span.currentTab a:link, #moduleList ul li span.currentTab a:visited, #moduleList ul li span.currentTab a:hover {
        color:#ffffff
    }
    #moduleList ul li a:link, #moduleList ul li a:visited {
        color:#444444
    }
    #moduleList ul li a:hover {
        color:#000000
    }
    #moduleList ul li span.currentTabLeft, #moduleList ul li span.currentTabRight, #moduleList ul li span.currentTab {
        background-image:url(images/currentTabGray.gif);
        background-repeat:no-repeat;
        border-bottom-color:#8e8e8e
    }

    <div id="moduleList">

                            <a href="#ctl00_AjaxLoginView1_Menu2_SkipLink"><img alt="Skip Navigation Links" src="/eservice/WebResource.axd?d=HWE7J2PUlnLya8lWJlEVZw2&amp;t=634129453271895014" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_AjaxLoginView1_Menu2" class="TabMenu SiteStaticMenu ctl00_AjaxLoginView1_Menu2_5 ctl00_AjaxLoginView1_Menu2_2" HideSelectElements="True" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage1" id="ctl00_AjaxLoginView1_Menu2n0"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage1.aspx" style="border-style:none;font-size:1em;">TabPage1</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage2" id="ctl00_AjaxLoginView1_Menu2n1"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_7" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_6" href="/eservice/TabPage2.aspx" style="border-style:none;font-size:1em;">TabPage2</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage3" id="ctl00_AjaxLoginView1_Menu2n2"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage3.aspx" style="border-style:none;font-size:1em;">TabPage3</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage4" id="ctl00_AjaxLoginView1_Menu2n3"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage4.aspx" style="border-style:none;font-size:1em;">TabPage4</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage5" id="ctl00_AjaxLoginView1_Menu2n4"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage5.aspx" style="border-style:none;font-size:1em;">TabPage5</a></td>
                </tr>
            </table></td>
        </tr>

    </table><a id="ctl00_AjaxLoginView1_Menu2_SkipLink"></a>

                      <div id="SiteContent">

                      </div>

                      <div class="SiteContentSpacer">
                      </div>

                </div>

现在，我在.aspx文件中编写了以下代码，以复制上述代码生成的制表功能-

     <div id="moduleList">
                <!-- start of content for ContentContainer -->

                            <asp:Menu CssClass="TabMenu" DataSourceID="TabMenuSitemap"
                             HideSelectElements="True"
                 ID="Menu2" Orientation="Horizontal" runat="server">
                  <StaticSelectedStyle CssClass="TabMenuItemSelected" />
                   <StaticMenuItemStyle CssClass="TabMenuItem" />
                              <StaticMenuStyle CssClass="SiteStaticMenu" />
                              <StaticHoverStyle CssClass="TabMenuItemHover" />
                              <DataBindings>
                                <asp:MenuItemBinding DataMember="SiteMapNode" Depth="0"
                NavigateUrlField="Url" TextField="Title"
                ToolTipField="Description" />
                              </DataBindings>
                            </asp:Menu>
    </div>

---

有没有办法强制asp:Menu控件吐出ul和li而不是表，这样我就可以使用现有的CSS样式来正确设置它们的样式，或者这是一个失败的原因？还有其他人遇到过类似的问题吗？

您正在寻找的被称为

它是一个适配器，使一些控件输出正确的HTML结构、div、uls等等

---

玩得开心

你要找的东西叫做

它是一个适配器，使一些控件输出正确的HTML结构、div、uls等等

玩得开心