Link to home
Start Free TrialLog in
Avatar of EYoung
EYoungFlag for United States of America

asked on

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.
Avatar of Chris Bloom
Chris Bloom
Flag of United States of America image

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?
Avatar of EYoung

ASKER

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?
Avatar of EYoung

ASKER

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>
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?

Avatar of EYoung

ASKER

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.
Go to Tools, Internet Options, Security, Custom Level Button, Find Scripting group (close to bottom), then see if the Active Scripting is Enabled.
Avatar of EYoung

ASKER

Yes, the Active Scripting is Enabled in the Scripting group.
Avatar of EYoung

ASKER

Under the "Allow scripting of Microsoft web browser control", the Disable option is checked.
Avatar of EYoung

ASKER

Can someone please assist me with this issue?  Thanks
Avatar of EYoung

ASKER

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?
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.
Avatar of EYoung

ASKER

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.
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.
Avatar of EYoung

ASKER

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". User generated image User generated image
<%@ 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

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
ASKER CERTIFIED SOLUTION
Avatar of Chris Bloom
Chris Bloom
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EYoung

ASKER

Thanks for the help.  That fixed the problem.