I am currently working on adding a menu to my website, but I am facing an issue with getting the sub menu items to display smaller text compared to the main menu item. Here is the code snippet I have been using:
<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>
Upon inspecting the rendered HTML:
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/TravelJoansBlog/WebResource.axd?d=i8kPrDg0W2gPsNdgiFoKNbdLkjHOBO6T-YtC_Usb-id70m3Q7jX8wpftWKKoZFCuuiThX_JLEnw1KCG7FBKqB3_JiRZTcYRUnLGsCYCvOwo1&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>
Additionally, here is the CSS styling that is relevant to this structure:
.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;
}
The problem occurs where only the styles within the SubMenuStyles element are being applied. I've attempted various solutions such as swapping CSS classes, setting font sizes in the asp:Menu control and then applying CSS styles, yet nothing seems to work. My aim is to have the sub menu item text (such as UNESCO Sites and Places) displayed in a smaller font size compared to the main menu item (WHERE I'VE BEEN)