Sub menu items not showing

I have created a web application using vs 2010.  On the form I have placed a menu control.  The control works fine at the top level but does not display the sub menu items when the cursor hovers over one of the top level menu items.

Here is the code:

    <div id="Layer3" style="position:absolute; left:832px; top:148px; z-index:5">

    <asp:Menu ID="Menu1" runat="server" BackColor="White" ForeColor="Maroon"
        DynamicHorizontalOffset="5" Font-Names="Times New Roman" Font-Size="Medium"
        StaticSubMenuIndent="10px" Width="350px" Orientation="Horizontal"
        Font-Bold="False" Height="16px" MaximumDynamicDisplayLevels="1">
       
        <DynamicHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"
            BackColor="White" ForeColor="Maroon"/>
        <DynamicMenuStyle BackColor="White" />
        <DynamicSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <Items>
            <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
            <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
            <asp:MenuItem Text="Monitor" Value="Monitor"></asp:MenuItem>
            <asp:MenuItem Text="Reports" Value="Reports">
                <asp:MenuItem Text="Retail Class Sales" Value="Retail_Class_Sales"></asp:MenuItem>
                <asp:MenuItem Text="Retail Executive Flash Sales" Value="Retail_Executive_Flash_Sales"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
        <StaticHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
    </asp:Menu>
    </div>


The application is being developed on a Windows XP machine and being displayed in IE8.  Eventually it will be published to our firm's intranet for viewing by many employees.  I am new to web development.

Thanks for the help.
LVL 7
EYoungAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
chrisrbloomConnect With a Mentor Commented:
Here's the MS KB article referencing the problem:
http://support.microsoft.com/kb/962351
0
 
chrisrbloomCommented:
That worked fine for me using VWDExpress 2010.

Is this inside a frame?  Have you checked your CSS to make sure it's not the same as the BG color?
0
 
EYoungAuthor Commented:
I am new to asp.net.  I don't think the menu is sitting inside a frame.  There is no frame on the form.  Additionally, I don't think there is any CSS on the form.  Do I need a CSS?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
EYoungAuthor Commented:
My web app just has one form that contains the following code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Retail_Reporting_System._Default" %>

<!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>Retail Reporting System</title>
    <style type="text/css">
        #form1
        {
            height: 226px;
        }
    </style>
</head>
  <body background="Images/Flagship_Store_50.JPG">

    <form id="form1" runat="server">

<!--...-->

    <div id="Layer1" style="position:relative; left:0px; top:0px; z-index:5"><img src="Images/RRS_1.jpg" alt="RRS" style="margin-left: 0px"/></div>    
    <div id="Layer2" style="position:absolute; left:1013px; top:30px; z-index:5; width: 209px;" align="right">Eric Young</div>
    <div id="Layer3" style="position:absolute; left:832px; top:148px; z-index:5">

    <asp:Menu ID="Menu1" runat="server" BackColor="White" ForeColor="Maroon"
        DynamicHorizontalOffset="5" Font-Names="Times New Roman" Font-Size="Medium"
        StaticSubMenuIndent="10px" Width="350px" Orientation="Horizontal"
        Font-Bold="False" Height="16px" MaximumDynamicDisplayLevels="1">
       
        <DynamicHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"
            BackColor="White" ForeColor="Maroon"/>
        <DynamicMenuStyle BackColor="White" />
        <DynamicSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <Items>
            <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
            <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
            <asp:MenuItem Text="Monitor" Value="Monitor"></asp:MenuItem>
            <asp:MenuItem Text="Reports" Value="Reports">
                <asp:MenuItem Text="Retail Executive Flash Sales" Value="Retail_Executive_Flash_Sales"></asp:MenuItem>
                <asp:MenuItem Text="Retail Class Sales" Value="Retail_Class_Sales"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
        <StaticHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
    </asp:Menu>
    </div>  

    </form>

  </body>
</html>
0
 
BurniePCommented:
Hi,

I did a test with your code with Firefox and IE and the sub menu items are showing.  

I then disabled Scripting and the sub menu items stopped showing.

Can you verify that you have Scripting (meaning Javascript) enabled in your browser?

0
 
EYoungAuthor Commented:
I am using IE 8.  I clicked on Tools, Internet Options, Advanced, then un-checked "Disable script debugging (Internet Explorer)" option.  Still can not see the sub menu items.

I can't find any reference to enabling Javascript.  Should I be looking some where else?

Thank you for the help.
0
 
BurniePCommented:
Go to Tools, Internet Options, Security, Custom Level Button, Find Scripting group (close to bottom), then see if the Active Scripting is Enabled.
0
 
EYoungAuthor Commented:
Yes, the Active Scripting is Enabled in the Scripting group.
0
 
EYoungAuthor Commented:
Under the "Allow scripting of Microsoft web browser control", the Disable option is checked.
0
 
EYoungAuthor Commented:
Can someone please assist me with this issue?  Thanks
0
 
EYoungAuthor Commented:
What I want to do is to have a horizontal main menu with vertical sub menus.  Is that possible with the Microsoft ASP menu control?
0
 
chrisrbloomCommented:
Yes, it's very possible.  The code you posted is working in both IE8 and Chrome for me.

Have you tried any other browsers?  I don't know for sure, but possibly the z-index may be causing a problem?  That's just a guess though, take it with a grain of salt.
0
 
EYoungAuthor Commented:
Thanks for responding.

All of the users here at the company are using IE7 or IE8.  So using another browser will not work.

Not sure about the z-index.  Should I change that?

I tried changing the "StaticDisplayLevels" from 1 to 3 and the sub menu items now always show up which is not what I want.  They now show up on the same line as the main menu.  I want them to show up in a vertical list under the main menu item and I only want them to show up when the mouse hovers over the main menu item not all the time.
0
 
chrisrbloomCommented:
The reason I asked about another browser was to determine if it were your code or a problem with your browser itself.  You are correct, it's bad form to force a user to use any specific browser just to make your site work correctly.

I tried your code in both IE8 and Chrome.  From what I can tell, your code is doing exactly what you want it to from my end.  My hunch is that it's with your browser not with the code.

I would leave StaticDisplayLevels at 1 since that's how deep you want shown horizontally.
0
 
EYoungAuthor Commented:
I think you may be correct about the problem being with my IE8 browser.  But unless I can figure out what is going on and how to fix it, I will be in a jam.

I have attached the code I am working with.

When I change the StaticDisplayLevels to 1, the sub menu showing "Report 1" and "Report 2" does not show.  It just shows a white block to the right of "Reports" with no words.  See image 1.

When I change the StaticDisplayLevels to 2, the sub menu shows both report names.  See image 2.

What I want to have happen is for the sub menu under Reports to not appear until the cursor is hovering over the main menu item "Reports". Image 1 Image 2
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Retail_Reporting_System._Default" %>

<!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>Retail Reporting System</title>
    <style type="text/css">
        #form1
        {
            height: 226px;
        }
    </style>
</head>
  <body background="Images/Flagship_Store_50.JPG">

    <form id="form1" runat="server">

<!--...-->

    <div id="Layer1" style="position:relative; left:0px; top:0px; z-index:5"><img src="Images/RRS_1.jpg" alt="RRS" style="margin-left: 0px"/></div>    
    <div id="Layer2" style="position:absolute; left:1013px; top:30px; z-index:5; width: 209px;" align="right"><asp:LoginName ID="LoginName2" runat="server" /></div>
    <div id="Layer3" style="position:absolute; left:10px; top:160px; z-index:5">

    <asp:Menu ID="Menu1" runat="server" BackColor="White" ForeColor="Maroon"
        DynamicHorizontalOffset="5" Font-Names="Times New Roman" Font-Size="Medium" 
        DynamicSubMenuIndent="10px" Width="350px" Orientation="Vertical"
        Font-Bold="False" Height="16px" MaximumDynamicDisplayLevels="6" StaticDisplayLevels="1">
               
        <DynamicHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" 
            BackColor="White" ForeColor="Maroon"/>
        <DynamicMenuStyle BackColor="White" />
        <DynamicSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <Items>
            <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
            <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
            <asp:MenuItem Text="Monitor" Value="Monitor"></asp:MenuItem>
            <asp:MenuItem Text="Reports" Value="Reports">
                <asp:MenuItem Text="Report 1" Value="Report_1"></asp:MenuItem>
                <asp:MenuItem Text="Report 2" Value="Report_2"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
        <StaticHoverStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticSelectedStyle BackColor="White" ForeColor="Maroon" Font-Bold="True" />
    </asp:Menu>
    </div>  

    </form>

  </body>
</html>

Open in new window

0
 
chrisrbloomCommented:
You are doing it correct when you have StaticDisplayLevels to 1.  What that parameter does is shows x number of levels in a static manner (mouse hover display is dynamic).  

The behavior in your screenshots is expected.

What's not expected, though is the fact that you can't see your submenu items.  

Seems like others may be having similar problems as you are.  Looks like there might be a patch available.  Check this article:  http://weblogs.asp.net/bleroy/archive/2009/03/23/asp-menu-fix-for-ie8-problem-available.aspx
0
 
EYoungAuthor Commented:
Thanks for the help.  That fixed the problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.