Why does the Menu control in MasterPage automatically expand after selecting an item in DropDownList in content page

Has anyone experienced the following anomaly?

I have a Menu control, populated by a SiteMap in a MasterPage

In a content page i have just a DropDownList in the top left corner of the page (no other controls yet as i notice this before adding more, so that is why the page is bare).

When an item is selected from the DropDownList (right now there are no events for the DropDownList, no autopostback, etc), the Menu section that is above the DropDownList is expanded and with the cursor still in place over the DropDownList the cursor is
now hovering over the menu items that have expanded and thus the menu branch remains open (until i move the cursor of course).

I see this behavior in Chrome only, not in IE. I have no other browsers installed.

Is there any way you can show us a published page so we can see if there is something strange in the HTML, or maybe see where something is interfering or just plain going weird?

I recreated the problem with the simpliest of data.

When you select a value from the dropdownlist make sure its a value that is not further down then the max length of the menu when it expands, otherwise you will not see the problem.

And use Chrome, issue does not happen in IE (at least not IE 11).

SiteMap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode url="" >
    <siteMapNode url="javascript:void(0);" title="Test Menu" >
      <siteMapNode url="javascript:void(1)" title="Node 1"></siteMapNode>
      <siteMapNode url="javascript:void(2);" title="Node 2"></siteMapNode>
      <siteMapNode url="javascript:void(3);" title="Node 3"></siteMapNode>
      <siteMapNode url="javascript:void(4)" title="Node 4"></siteMapNode>
    </siteMapNode>   
  </siteMapNode>
</siteMap>

MasterPage

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MyNameSpace.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style type="text/css">
		.navigation_menu {padding: 4px 0px 0px 3px; position: relative;}
        .navigation_menu ul {list-style: none;margin: 0px;padding: 4px 20px 4px 20px;width: auto;}
        .navigation_menu ul li a,div.menu ul li a:visited{background-color:white;border:1px solid #999;color:#000;display:block;line-height:1.35em;padding:0 20px 3px 15px;white-space:nowrap}
        .navigation_menu ul li a:hover{background-color:silver;}
	</style>
	<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
	<form id="form1" runat="server">
	<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
	<asp:Menu ID="Menu_Navigation" runat="server" CssClass="navigation_menu"
		StaticMenuItemStyle-Height="19px"
		StaticMenuItemStyle-HorizontalPadding="10px"
		StaticMenuItemStyle-VerticalPadding="2px"
		DynamicVerticalOffset="0" 
		DataSourceID="SiteMapDataSource1"
		StaticEnableDefaultPopOutImage="true" 
		DynamicEnableDefaultPopOutImage="true"
		Orientation="Horizontal"
		EnableViewState="true" 						                
		IncludeStyleBlock="true"
		MaximumDynamicDisplayLevels="3" 
		StaticDisplayLevels="1">
	</asp:Menu>
	<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
	<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
	</form>
</body>
</html>

Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyNameSpace.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <table cellspacing="0" style="border-collapse: collapse; margin-left:12px; margin-top:4px" >
        <tr>
            <td align="left" valign="middle">
                <fieldset>
                    <legend><asp:Label ID="Label_legend_Filter" runat="server" Text="Selection" /></legend>
                    <table width="100%" cellpadding="1px">
                        <tr>
                            <td>
                                <asp:DropDownList ID="DropDownList_Selection" runat="server" AppendDataBoundItems="true"  >
                                    <asp:ListItem Value="" Text=" - Select Web - " Selected="True"></asp:ListItem>
                                    <asp:ListItem Value="1" Text="Test DropDownList Value 1"></asp:ListItem>
                                    <asp:ListItem Value="2" Text="Test DropDownList Value 2"></asp:ListItem>
                                    <asp:ListItem Value="3" Text="Test DropDownList Value 3"></asp:ListItem>
                                    <asp:ListItem Value="4" Text="Test DropDownList Value 4"></asp:ListItem>
                                    <asp:ListItem Value="5" Text="Test DropDownList Value 5"></asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </td>
        </tr>
    </table>
</asp:Content>

My Chrome version: Version 35.0.1916.153 m

Framework 4.0

Ajax: 4.1.7.123

I wasn’t able to duplicate this in Chrome 35, IE 11, FireFox 30, or Safari 5.1.7 for Windows while targetting a .Net 4.0 compile. The dropdown worked fine in all cases without opening any menu item. Check to see if you have any Chrome add-ins installed.
You may need to disable some. I’ve had some add-ins break a site before that worked perfectly acceptable otherwise. Try another computer that doesn’t have any add-ins in the browser as well.

Let me know if you are running an earlier version of the framework such as 2.0/3.x and I’ll try to compile it against that version.

I created a new project and put in it the exact data that i pasted here and got the same results.

Make sure you select Test DropDownList Value 1, and when you do, select it when your cursor is over the ‘Test’ part of the text.

I have no addons enabled

What version of the framework are you running? Can you replicate it when you look at it from another computer? 

I am still unable to replicate it. I even put the code into a 2.0 project and it looked off, since it renders the menu with a table, but I cannot get it to duplicate the issue in any of the browsers I mentioned before.

Chrome Version: 35.0.1916.153 m

.Net Framework 4.0

Ajax: 4.1.7.123

It acts the same on my machine at work (same chrome version).

Still can’t figure out whats happening.

There is no postback occuring when an item is selected fromt the dropdownlist so why is the page acting like its being reloaded?

this is just bizzare.

It completely stumps me why you are unable to replicate this ………….. every different way I try it, I get the same results. With a masterpage, without. in an updatepanel, no updatepanel. with css, without css.

Perhaps you are not replicating my actions accurately.

Leave a Reply