Troubleshooting IE6, submenus not appearing

Question

User-546006562 posted

I've read the posts about adding height to the <li>, but I haven't been able to get this design to work.  I suspect that I'm missing something right in front of my face.

------------------------------------Here's the main css code related to the menus:-----------------------------------

/* Main Navigation --------------------------------------------------------*/

div.mainnavcontainer {
    text-align: left;
    border-bottom: 1px solid #5e543b;
    margin: 0;
    padding: 0;
    background: #6b6146 url(../images/menufadedefault.png) left bottom repeat-x;
    height: 2.5em;
    }

/* Menu items --------------------------------------------*/
.mainmenu {
  font-size: .77em;
}

.mainmenu ul.AspNet-Menu
{
    /* Tier 1 ------------------------------------*/
    width: 100%;
    float: left;
    margin: 0 0 0 -15px;
    padding: 0 0 0 15px; /* 0 0 12px 15px */
    list-style-type: none;
    z-index: 1;/* so drop-down menu appears over grid */
}

.mainmenu ul.AspNet-Menu ul { /* Tier 2 --------------------------------*/
    top: 100%;
    left: 0;
    z-index: 1;  /* so drop-down menu appears over grid */
    }

.mainmenu ul.AspNet-Menu ul ul { /* Tier 3+ ----------------------------*/
    top: 0;
    left: 12em;
    z-index: 1;  /* so drop-down menu appears over grid */
    }

.mainmenu li {/* all list items ----------------------------------------*/
        background: #6b6146 url(../images/menufadedefault.png) left bottom repeat-x;
    }

.mainmenu li ul li:hover, /*submenu list items being hovered over-----*/
.mainmenu li ul li.AspNet-Menu-Hover {
    background-color: #9a8c67;
    color: white;
    }

.mainmenu a, /* all anchors and spans (nodes with no link) -----------*/
.mainmenu span {
    color: white; height: 2.5em;
    padding: 4px 7px 4px 7px;
    line-height: 1.1em;
    text-decoration: none;
    float: left;   
    width: 12em;
    }
   
.mainmenu ul li ul li a,
.mainmenu ul li ul li {
    background: #6b6146; 
    }

.mainmenu li:hover a, /* first menu hovered text --------------------*/
.mainmenu li:hover span,
.mainmenu li.AspNet-Menu-Hover a,
.mainmenu li.AspNet-Menu-Hover span {
    color: white;
    background: url(../images/menufadeselected.png) repeat-x bottom left;
    }

.mainmenu ul li ul li a,
.mainmenu ul li ul li span,
.mainmenu ul li ul li:hover span,
.mainmenu ul li ul li.AspNet-Menu-Hover a,
.mainmenu ul li ul li.AspNet-Menu-Hover span {
    color: white;
    background-image:none!important;
    }

.mainmenu li:hover a:hover {
    color: white;/* first-level menu, linked text */
    }
   
.mainmenu li:hover li:hover a, /* submenu hovered text-------------- */
.mainmenu li:hover li:hover span,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.mainmenu li:hover li:hover li:hover a,
.mainmenu li:hover li:hover li:hover span,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span {
    background: #9a8c67;
    color: white;
    }

.mainmenu li:hover li a, /* the tier above this one is hovered -----*/
.mainmenu li:hover li span,
.mainmenu li.AspNet-Menu-Hover li a,
.mainmenu li.AspNet-Menu-Hover li span {
    color: white;
    }

.mainmenu li:hover li:hover li a, /* third tier colors when the tier above this one is hovered*/
.mainmenu li:hover li:hover li span,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span {
    color: white;
    background: #6b6146;
    }

/* This section of the style sheet is intended to contain rarely changed rules used when the Menu control adapter is enabled. */
/* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */
/* See WhitePaper.aspx for details. */

ul.AspNet-Menu {
    ;
    }

ul.AspNet-Menu,
ul.AspNet-Menu ul {
    margin: 0;
    padding: 0;
    display: block;
    }

ul.AspNet-Menu li {
    ;
    list-style: none;
    float: left;
    }

ul.AspNet-Menu li a,
ul.AspNet-Menu li span {
    display: block;
    text-decoration: none;
    }

ul.AspNet-Menu ul
{
    ;
    visibility: hidden;   
    }

/* Add more rules here if your menus have more than three (3) tiers --------*/
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul {
    visibility: hidden;
    }

/* Add more rules here if your menus have more than three (3) tiers --------*/
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul {
    visibility: visible;
    }

.AspNet-Menu-Vertical ul.AspNet-Menu li {
    width: 100%;
    }
 

 ------------------------------------Here's the <IE7 css code:------------------------------------

ul.AspNet-Menu li, .mainmenu li
{
    float: left !important;
    height: 2.5em !important;
    width: 12em !important;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    height: 2.5em !important;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: left !important;
}

/* Undoing rules used for IE7 and other browsers. */

ul.AspNet-Menu ul
{
    visibility: visible !important;   
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: visible !important;   
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible !important;   
}

/* Pre-IE7 rules used to avoid performance problems found when using the newer rules. */

ul.AspNet-Menu ul
{
    display: none;   
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li:hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul
{
    display: none;
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
{
    display: block;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: none;
}



/* ---------commented out for test ----------

ul.AspNet-Menu li {
    width: 12em;
    }


ul.AspNet-Menu li
{
    float: left !important;
    height: 2.5em !important;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    height: 2.5em  !important;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: left !important;
}

 Undoing rules used for IE7 and other browsers.

ul.AspNet-Menu ul
{
    visibility: visible !important;  
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: visible !important;   
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible !important;   
}

 Pre-IE7 rules used to avoid performance problems found when using the newer rules.

ul.AspNet-Menu ul
{
    display: none;   
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li:hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul
{
    display: none;
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
{
    display: block;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: none;
}
 

 ------------------------------------And the related html:-------------------------------------------
 

<div class="mainnavcontainer">
   
    <div class="mainmenu" id="ctl00_mnuUser">
    <div class="AspNet-Menu-Horizontal">
            <ul class="AspNet-Menu">
                <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">
                        Account Home</span>
                    <ul>

                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Summary">Summary</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="News">News</a>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <a href="x.aspx" class="AspNet-Menu-Link" title="Data">Data</a>
                        </li>
                   </ul>
                </li>
                <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Instructions</span>
                    <ul>

                        <li class="AspNet-Menu-Leaf">
                            <a href="x.html" class="AspNet-Menu-Link" title="Disbursements">
                                Disbursements</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="x.aspx" class="AspNet-Menu-Link" title="Deposits">
                                Deposits</a>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <a href="x.html" class="AspNet-Menu-Link" title="Transfers">Transfers</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="x.html" class="AspNet-Menu-Link" title="Invoices">Invoices</a>
                        </li>

                        <li class="AspNet-Menu-WithChildren">
                            <span class="AspNet-Menu-NonLink">Securities</span>
                            <ul>
                                <li class="AspNet-Menu-Leaf">
                                    <a href="x.html" class="AspNet-Menu-Link" title="Deposit">Deposit</a>

                                </li>
                                <li class="AspNet-Menu-Leaf">
                                    <a href="x.html" class="AspNet-Menu-Link" title="Withdraw">Withdraw</a>
                                </li>
                            </ul>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Void">Void</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Information</span>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Request Other Service">Request Other Service</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Warrants">Warrants</a>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Approve Requests">Approvals</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Maintain Templates">Templates</a>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">View Requests</span>
                        </li>
                    </ul>
                </li>
                <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Financials</span>
                    <ul>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Client Statements</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Invoices</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Other</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Treasury</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">GASB40</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Endowments</span>
                        </li>
                    </ul>
                </li>
<li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Maintenance</span>

  <ul>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Maintain Account</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Maintain User</span>

                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Approve Pending Request</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="UserAndActMaintainance/MaintainClients.aspx" class="AspNet-Menu-Link" title="Maintain Client">Maintain Client</a>

                        </li>
                    </ul>
                </li>
          <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Client Service</span>
                    <ul>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Calculate Numbers</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Verify Depoits">Verify Deposits</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Checks">Process Checks</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Enter Details">Enter Details</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Transactions">Process Transactions</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Stop/Void Check">Stop &amp; Void</a>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Returns</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Review Receivables</span>
                        </li>

                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Enter Data</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Complete Entry</span>

                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Process Batch</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Security</span>

                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Distributions</span>
                        </li>
                    </ul>
                </li>
                <li class="AspNet-Menu-WithChildren">

                    <span class="AspNet-Menu-NonLink">Compliance</span>
                    <ul>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Restricted List</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Transactions</span>
                        </li>
                    </ul>
                </li>
                <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Unclaimed</span>

                    <ul>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">For Sale</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Indicated</span>

                        </li>
                    </ul>
                </li>
                <li class="AspNet-Menu-WithChildren">
                    <span class="AspNet-Menu-NonLink">Bonds</span>
                    <ul>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Details</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                            <span class="AspNet-Menu-NonLink">Monitor Flows</span>
                        </li>
                        <li class="AspNet-Menu-Leaf">

                            <span class="AspNet-Menu-NonLink">Process</span>
                        </li>
                    </ul>
                </li>
            </ul>

    </div>
</div>
<div class="clear"></div>
</div>  <!--/mainnavcontainer -->
 

Answer 1

User-2076991548 posted

Sweet Lord Jesus son of god and cousin of Jay Leno... that's one nasty stylesheet.
First of all im no expert, but I do work with css for years now.  "hover" does not work on IE except for <a>

 this:

ul.AspNet-Menu ul
{
    display: none;   
}

is rendering your top level UL invisible and ul.AspNet-Menu ul:hover wont work

I hope it helps. After all I did test it on IE7 and cutted all properties one by one after reaching that
Mauro

Answer 2

User-546006562 posted

Thanks for taking a look Mauro.  I am using a separate style sheet for <IE7 that should override the display: none; in the main style sheet.

The related section is included below.  Not sure why it's not working, though.

--------- 

 /* Undoing rules used for IE7 and other browsers. */

ul.AspNet-Menu ul
{
    visibility: visible !important;   
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: visible !important;   
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible !important;   
}
 

Answer 3

User-2076991548 posted

Thats ok but correct me if im wrong when i say u won;t get hovering effect in IE, but everything visible instead?

What i mean is besides it overwritten or not, it's not gonna be a "funky" menu. Making that item visible will get u to the plain version (more or less) or the menu, and maybe even with some overlapping between floating items

Answer 4

User-2076991548 posted

forget what i said. I did some research and it should work.

But here it is why it wasnt:
U must add the doctype!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That will make it work... forgetting the damn doctype gave me many headaches too

Greets,
Mauro

 

Answer 5

User-546006562 posted

 Well, the resolution was right in front of my face.  The master page wasn't reading the javascript file, which contains instructions for IE related to menu display.