2

そのため、Web サイトにメニューを配置しようとしていますが、サブメニュー項目のテキストを最初のメニュー項目よりも小さくするのに問題があります。これが私のコードです：

<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 要素にあるものだけが適用されます。2 つの CSS クラスを切り替え、asp:Menu コントロールでフォント サイズを設定してから CSS スタイルを適用しようとしましたが、うまくいきませんでした。繰り返しますが、サブメニュー項目のテキスト (UNESCO Sites and Places) を最初のレベルのメニュー (WHERE I'VE BEEN) よりも小さくしようとしています。

4

1 に答える 1