Hi Imar,

Following your book, I have created a website but there seems to be an issue with the site menu bar when the website loads in the browser. I have used an asp.net menu control set to horizontal, but when the page loads the menu and sub menu appears vertical, briefly for a second before displaying horizontally. The menu control also uses a sitemap data source control.

This is the website://www.wykeham-gallery.co.uk

This is my menu control code in the Master Page:

<div class="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" CssClass="MainMenu" SkipLinkText="">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
ShowStartingNode="False" />
</div>


This is my CSS styles for the menu:

.MenuWrapper
{

clear: both;
background-color: #808040;
width: 960px;
height: 21px;
border-bottom: 3px solid #CCCCCC;
padding-top: 2px;
padding-left: 0px;
margin: 19px 0px -5px 0px;
}

#MenuWrapper a
{
/*
Links in the Menu are white.
*/
color: #fff;

}

.MainMenu
{

border: 0px solid red;
height: 19px;
background-color: #808040;
padding: 0px 0px 1px 0px;
margin: 0px 0px 0px 25px;

}

.MainMenu ul li
{
/*
Gives the seven menu items in the main menu an auto width each
*/
width: auto;

}





ul.level1
{
/* Defines the appearance of main menu items. */

background-color: #808040;
font-size: 14px;
font-weight: normal;
height: 19px;
line-height: 19px;
border: 0px solid purple;
margin: 2px 0px 2px 0px;
text-align: left;
}

ul.level1 .selected
{
/* Defines the appearance of active menu items */
background-color: #808040;


}

a.level1
{
/* Adds some white space to the left of the main menu item text */

margin-left: 55px;
color: #FFFFFF;



}

a.level2
{
/* Defines the appearance of the sub menu items */
background-color: #808040;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 8px;
margin-top: 5px;
margin-left: 55px;
margin-bottom: 5px;
color: #FFFFFF;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
font-size: 14px;


}

a.level1:hover, a.level2:hover
{
/* Defines the hover style for the main and sub menu items */
background-color: #9D9D4F;

}

Do you know what the problem could be?

Many Thanks

Hi Chris,

This happens because of the way menu is handled in asp.net. Prior to ASP.NET 4 the menu was rendered as table but with .NET4 the default mode is ul.
The same has been mentioned in the book too under "rendering mode" heading.

Now your problem,

To my thinking try tweaking with the ul css property, try

.MainMenu ul li ul{ display: none;}

Hi 07Raghav,

Thank you for your response on this. I have tweeked the ul css property like you said, and the menu bar seems to display properly which is great. However, the drop down sub menu items under the Framing link, tend to appear slightly stacked over each other and the background colour of each drop down menu item only displays the length of the actual wording in the link.

I don't suppose you have any ideas why?

Many Thanks,

Hello Chris,

Not sure, try this..
.MainMenu ul li{ position: relative; float: left; list-style: none;}

The main reason of approximation in solutions is not having the direct code, but try playing around the css, its gonna solve the situation.

ASP.NET4 uses(for default mode) ul & li to render menu items thereof you need to clearly define their properties.