Solved

Sub menu items not showing

Posted on 2011-02-16
17
1,648 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Hangfire / asp.net sample 3 30
JavaScript error 1 34
Format column on datatable 7 18
SQL best practice question 3 18
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

747 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now