CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
jamone
jamone

Reputation: 17421

My Dropdown menu works right on every browser but IE 7. Why?

I'm making some basic drop down menus based on this tutorial So its all dandy except for IE7. It appears when you hover on it but when you move the mouse from the main element to the ones below it it hides again.

/* General */
#cssdropdown { position:absolute; right:0px; top:0px; font-size:medium; font-weight:bold; }
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; color:Navy; text-decoration:none; }

/* Head links */
#cssdropdown li.headlink 
{ 
    width: 150px; 
    float: left;
    background-color: #e9e9e9; 
    text-align: center; 
    height:35px;
}
#cssdropdown li.headlink a { display: block; padding:7px;} /*7px*/

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; text-align: left; background-color:#e9e9e9; } 
/*#cssdropdown li.headlink:hover ul { display: block; }*/ <--I've tried this via JS below
#cssdropdown li.headlink ul li a { padding:5px;} 
#cssdropdown li.headlink ul li a:hover { background-color: #333; color:White; }

And here's the jQuery I used per their instructions to show the menu as an IE fix. (Note it works identical when I use pure CSS or CSS & jQuery even in IE 7. All other browsers work fine.

$(document).ready(function () {
        $('li.headlink').hover(
            function () { $('ul', this).css('display', 'block'); },
            function () { $('ul', this).css('display', 'none'); });
    });

and finally my HTML:

<ul id="cssdropdown">
        <li class="headlink">
            <a href="../Pages/MainMenu.aspx">Main Menu</a>
            <ul>
                <li><a href="www.google.com">Google</a></li>
                <li><a href="www.yahoo.com">Yahoo</a></li>
                <li><a href="www.msn.com">MSN</a></li>
            </ul>
        </li>
 </ul>

I do have jQuery linked properly.

Upvotes: 2

Views: 860

Answers (5)

Bill Frederickson
Bill Frederickson

Reputation: 1

This works for Me : I Used jQuery 1.10.2 if it matters..

if (/msie 7\./ig.test(navigator.userAgent.toLowerCase())) {
    $("ul li ul li").each(
        function () {
            $(this).css("width", $(this).parent().width() + "px");
        }
    );

    $("ul li ul").each(
        function () {
            var ParentPos = $(this).parent().offset();
            $(this).css({
                "top": (ParentPos.top + $(this).parent().height()) + "px",
                "left": ParentPos.left + "px"
            }); // end css for This                             
        } // end function/each             
    );

    $("ul li ul li ul").each(
        function () {
            $(this).css("margin-top", "3px"); // end css for This   
        }
    );

} // end if IE 7 Bug -- B.Frederickson -- acey99

Upvotes: 0

Psytronic
Psytronic

Reputation: 6113

I had a very similar problem last week (or week before), for me it was the sub menu ul needed to have a width declaration of the same width as the li.

Upvotes: 0

Todd Moses
Todd Moses

Reputation: 11029

It appears to be the IE z-index issue.

Set the z-index on the two position:relative elements header and content to fix:

      #header { 

          z-index:2; 

      } 

      #content { 

          z-index:1; 

      }

Upvotes: 0

SLaks
SLaks

Reputation: 887453

Remove height:35px; from li.headlink and it will work.

Upvotes: 5

WVDominick
WVDominick

Reputation: 2074

On their page they are using plain JS on one of the examples. Does it work when you try this code instead of the jquery code?

        var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
        var li = lis[i];
        if (li.className == 'headlink')
        {
            li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
            li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
        }
    }

Upvotes: 0

Related Questions