Hi,
Based on the classes currently being used by the site, the following CSS will add a down arrow to root-level menu items with children:
li.has-popup > a::after {
position: absolute;
content: "";
border-top: 5px solid #31a19b;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
display: inline-block;
top: 10px;
right: 28px;
}
li.has-popup span.t {
padding-right: 44px;
}
You'll need to add additional similar CSS to make arrows show on sub-menus if you wind up having sub-menu flyouts.
Otherwise, if you want to use the .AspNet-Menu-WithChildren class you'll need to set that as the class for menu items with children in your theme.skin. To do this, first you need to look in your layout.master for the "SiteMenu" control, and find if it has a MenuSkinId=""
property. If it does, then open the theme.skin and search for whatever Skin Id is between the "" quotes. If it doesn't, then open the theme.skin and search for the <portal:SiteMenu>
with the SkinId "SiteMenu" - that should be the default.
Once you've found the right menu, add the setting LiCssClassWithChildren="AspNet-Menu-WithChildren"
- This should make that class render on your menu items with children, that way any CSS you add for that class will work!
Don't forget you may need to reset the app after changing the theme.skin for it to reload. To do this browse to /Admin/ServerInformation.aspx on your site and click the "restart application" button. If no button appears, you'll need to touch the web.config in your wwwroot - just open it and type a space anywhere and save, that will also restart the app.
Hope this helps.