horizontal asp.net menu displaying as a vertical list

Question

http://i44.tinypic.com/5ureav.png

When my pages render occasionally the horizontal menu displays like that. Why?

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
    EnableViewState="false" IncludeStyleBlock="false" 
    Orientation="Horizontal" ClientIDMode="AutoID">
    <Items></Items>
</asp:Menu>

It generally does this when a page is loading a lot of data, but when the data finishes loading it never goes back to horizontal.

Testing with IE 7, 8, and 9, and Chrome.

I looked around the internet and found some people saying it was the z-index but adjusting didn't help.

I'm using "developer tools" in IE8 to troubleshoot further and found some javascript calls that didn't succeed. I have no idea what they mean.

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$tsmgrEmployees', 'aspnetForm', ['tctl00$MainContent$uPanelEmployees',''], ['ctl00$MainContent$btnClear','','ctl00$MainContent$txtEUID','','ctl00$MainContent$txtFirstName','','ctl00$MainContent$txtLastName',''], [], 90, 'ctl00');
//]]>
</script>

Error produced

'Sys.WebForms.PageRequestManager' is null or not an object

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'ctl00_NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>

Error produced

'Sys.Webforms.Menu' is null or not an object

I believe that the remaining errors are all cascades from these two. Do you think I should replace the jscript libraries with updated ones? Could it possibly be browser related since I'm using IE8 (not in compatibility mode).

Another odd bit of information that might help is, when I build the solution in Visual Studio 2010 on WinXP Pro on my development environment it works fine, but when I publish it to the server (IIS 7.5, Server 2008 R2) it breaks. At first I thought it might be data lag, but the connection string on the server should be faster than the connection string on my dev environment. Server uses Localhost as the target, my dev workstation uses the server path... so I don't think its the data lag.

Answer 1

I had this same problem. I solved it by making the RenderingMode="Table" under the asp:Menu control.

Example:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" RenderingMode="Table">
        <StaticMenuItemStyle CssClass="menuitem" />
        <DynamicMenuItemStyle CssClass="menuitem" />

You will have to fiddle a little more with css (deleting the 'ul' and 'li' attributes in your css).

Creating

 <StaticMenuItemStyle CssClass="menuitem" />
 <DynamicMenuItemStyle CssClass="menuitem" />

In menu control (as shown above) also helps with css formatting.

For some reason the menu list is creating this problem. This is at least a workaround.