Solved

Sub menu items not showing

Posted on 2011-02-16
17
1,680 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:EYoung
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
  • 2
17 Comments
 
LVL 3

Expert Comment

by:chrisrbloom
ID: 34911731
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
 
LVL 7

Author Comment

by:EYoung
ID: 34911974
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
 
LVL 7

Author Comment

by:EYoung
ID: 34911989
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 16

Expert Comment

by:BurnieP
ID: 34912096
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
 
LVL 7

Author Comment

by:EYoung
ID: 34912224
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
 
LVL 16

Expert Comment

by:BurnieP
ID: 34912295
Go to Tools, Internet Options, Security, Custom Level Button, Find Scripting group (close to bottom), then see if the Active Scripting is Enabled.
0
 
LVL 7

Author Comment

by:EYoung
ID: 34912320
Yes, the Active Scripting is Enabled in the Scripting group.
0
 
LVL 7

Author Comment

by:EYoung
ID: 34912343
Under the "Allow scripting of Microsoft web browser control", the Disable option is checked.
0
 
LVL 7

Author Comment

by:EYoung
ID: 34918427
Can someone please assist me with this issue?  Thanks
0
 
LVL 7

Author Comment

by:EYoung
ID: 34919425
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
 
LVL 3

Expert Comment

by:chrisrbloom
ID: 34919508
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
 
LVL 7

Author Comment

by:EYoung
ID: 34919675
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
 
LVL 3

Expert Comment

by:chrisrbloom
ID: 34919823
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
 
LVL 7

Author Comment

by:EYoung
ID: 34920035
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
 
LVL 3

Expert Comment

by:chrisrbloom
ID: 34920112
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
 
LVL 3

Accepted Solution

by:
chrisrbloom earned 500 total points
ID: 34920126
Here's the MS KB article referencing the problem:
http://support.microsoft.com/kb/962351
0
 
LVL 7

Author Closing Comment

by:EYoung
ID: 34921176
Thanks for the help.  That fixed the problem.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Validation for a field in asp.net 3 31
Set arraylist as datatable 2 29
How to embed a manual into my vb 2005 project 7 26
AD Computer Objects in VB .Net 2 21
The ECB site provides FX rates for major currencies since its inception in 1999 in the form of an XML feed. The files have the following format (reducted for brevity) (CODE) There are three files available HERE (http://www.ecb.europa.eu/stats/exch…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question