菜单样式不像我期望的那样工作答案

【问题标题】：Menu style not working like I expect it to菜单样式不像我期望的那样工作
【发布时间】：2013-09-23 11:40:49
【问题描述】：

所以我试图在我的网站中放置一个菜单，但我无法让子菜单项的文本小于第一个菜单项。这是我的代码：

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
        <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="subMenuStyle" />
        </LevelMenuItemStyles>
        <LevelSubMenuStyles>
            <asp:SubMenuStyle CssClass="masterBannerMenu" />
        </LevelSubMenuStyles>
            <Items>
                <asp:MenuItem Text="WHERE I'VE BEEN" NavigateUrl="~/whereivebeen.aspx">
                    <asp:MenuItem Text="UNESCO Sites" NavigateUrl="~/unesco.aspx" />
                    <asp:MenuItem Text="Places" NavigateUrl="~/BlogPosts.aspx" />
                </asp:MenuItem>
            </Items>
        </asp:Menu>

这是呈现的 HTML：

<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/TravelJoansBlog/WebResource.axd?d=i8kPrDg0W2gPsNdgiFoKNbdLkjHOBO6T-YtC_Usb-id70m3Q7jX8wpftWKKoZFCuuiThX_JLEnw1KCG7FBKqB3_JiRZTcYRUnLGsCYCvOwo1&amp;t=634970873020000000" width="0" height="0" style="border-width:0px;" /></a><div id="Menu1">
    <ul class="level1 masterBannerMenu">
    <li><a class="popout level1 subMenuStyle" href="whereivebeen.aspx">WHERE I'VE BEEN</a><ul class="level2">
        <li><a class="level2" href="unesco.aspx">UNESCO Sites</a></li><li><a class="level2" href="BlogPosts.aspx">Places</a></li>
    </ul></li>
</ul>

这里是相关的 CSS：

.masterBannerMenu a
    {
        font-family:"Century Gothic";
        font-size: 16pt;
        width: auto;
        text-align: left;  
        color: Black;
        text-decoration: none;   
    }
    .subMenuStyle a
    {
        font-family:"Century Gothic";
        font-size: 12pt;
        width: auto;
        text-align: left;  
        color: Black;
        text-decoration: none;   
    }

只有 SubMenuStyles 元素中的内容才会被应用。我尝试切换两个 CSS 类，在 asp:Menu 控件中设置字体大小，然后应用 CSS 样式，但我没有运气。同样，我试图让我的子菜单项文本（联合国教科文组织站点和地点）小于一级菜单（我去过的地方）

【问题讨论】：

是的，这两个 CSS 类的文本大小不同
考虑编辑问题以向我们展示实际呈现的 html 和相关的 css。
在<li> 内嵌套<ul> 不是有效的HTML，可能是问题的主要原因。

标签： asp.net css

【解决方案1】：

您需要更改您的 .NET 标记和/或代码隐藏，以使其生成类似于以下内容的 HTML：

<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/TravelJoansBlog/WebResource.axd?d=i8kPrDg0W2gPsNdgiFoKNbdLkjHOBO6T-YtC_Usb-id70m3Q7jX8wpftWKKoZFCuuiThX_JLEnw1KCG7FBKqB3_JiRZTcYRUnLGsCYCvOwo1&amp;t=634970873020000000" width="0" height="0" style="border-width:0px;" /></a>
<div id="Menu1">
    <ul class="level1 masterBannerMenu">
        <li><a class="popout level1 subMenuStyle" href="whereivebeen.aspx">WHERE I'VE BEEN</a></li>
    </ul>
    <ul class="level2">
        <li><a class="level2" href="unesco.aspx">UNESCO Sites</a></li><li><a class="level2" href="BlogPosts.aspx">Places</a></li>
    </ul>

见FIDDLE

【讨论】：

这可能是对<asp:*> 控件的一揽子声明。
既然这些没有使用数据库来填充它们的值，我应该只能使用 HTML 吗？看来我会？
哦，当然。如果您可以使用良好的老式 HTML 来完成您的工作，而不是使用任何 <asp:> 控件，那就去做吧。保持简单。
我对如何在悬停时弹出 level2 项目感到困惑。
我无法让它显示在“我去过的地方”下面并且没有文字装饰