position:absolute container hiding position:relative child

Question

I'm building a three tier navigation system. The first two levels display horizontally one above each other (the second absolutely positioned), and the third level drops down vertically (position:relative). I'm using jQuery and hoverintent to calculate margining and fading in and out of the various levels. This all works fine in Chrome and FF, but in IE, the third level is hidden. I'll only see a sliver of the 4px test border I set on it.

The basic nested nav structure is as follows:

<div id="topnav"> <!--main nav container-->
    <ul>
    <li> <!--root level nav items-->            
        <div>  <!--position absolute 2nd level-->   
        <ul>
        <li> <!--second level nav items -->
            <div> <!--third level wrapper-->
                <div> <!--third level content-->
                <ul> <!--columns & list groups-->
                <li>

Here's the CSS I have setup which works correctly in FF & Chrome. The top 2 levels work fine in IE, but the third gets hidden

#topnav {
  margin: 0; padding: 0;
  width: 940px;
  list-style: none;
  font-size: 1.1em;
  /*position:relative; /*vital*/
  /*z-index:1000;*/
  z-index:1002;
   overflow:visible !important;   

}

#topnav ul{
  padding:0 0 0 0 !important;
  margin:0;
}

#topnav ul li {
  float: left;
  width:auto; 
  margin: 0; padding: 0;
  list-style-type:none;
  line-height:3.2em;
  font-weight:700;
  letter-spacing:.03em;
  background:url(/images/960/110304-sprite.png) 100% -865px; 
  /*height:37px;*/

}

#topnav ul li:hover,
#topnav ul li a:hover{
background:transparent url(/images/960/20110321-navhover.png) 0 0 repeat-x;
  color:#000;

}
/*second level*/
#topnav ul li div{
  width:940px; 
  background:transparent url(/images/960/20110321-navhover.png) 0 -75px repeat-x;
  text-transform:none;
  margin:-6px 0 0 0;
  position: absolute; 
  top: 43px; left:0;
  z-index:1003;
  height:auto; 
}
#topnav ul li div ul{
  /*position:relative !important;*/
  /*
  margin:0 auto; */
}


#topnav ul li div ul li{
  border-left:1px solid #ccc;
}

#topnav ul li div ul li:hover,
#topnav ul li div ul li a:hover{
  background:#eee url(/images/960/110304-sprite.png) 0 -160px no-repeat;
  color:#0067b4;
}


#topnav ul li div *{
  background:none;
}

#topnav ul li a {
  float: left;
 /* text-indent: -9999px; /*--Push text off of page--*/
  /*height: 37px;*/
  padding:0 5px 0 5px;
}


/*** HIDE CHILDREN FOR NOW ***/
#topnav ul li div,
#topnav ul li div ul li div div{
  display:none; 
}

/*Third Level*/
#topnav ul li div ul li div{
 background:none;
 width:auto;
}

#topnav ul li div ul li div div{
  height:auto !important; 
  /*_height:400px;*/
  position:relative; 
  top:43px; 
  border:4px solid blue;
  width:100px;
  padding:0 3px 0 3px;
  margin-top:-43px;
  background:#eee;
  border-right:1px solid #ccc;
  border-left:1px solid #ccc;
  border-bottom:1px solid #ccc;
  z-index:1004; 
}

#topnav ul li div ul li div div div{
    border:none; 
    clear:both; 
    margin-bottom:-3px;
    background:none; 
}

#topnav ul li div ul li div div ul{
  float:left;
  height:auto;
  margin:0 5px 5px 5px;
  padding:none !important;
 /*border:1px solid green*/
 border-right:1px dotted #ccc;

}

#topnav ul li div ul li div div ul li{
  float:none !important;
  display:block; 
  height:auto;
  font-size:1em; 
  line-height:1.1em; 
  font-weight:normal;
  text-align: left; 
  margin:4px 4px 5px 4px; 
  padding:none !important;
  border:none;
  /*border-bottom:1px dotted #ccc;*/
}

#topnav ul li div ul li div div ul li:hover{
 background:none;
 }

#topnav ul li div ul li div div ul li a{
  float:none;
  color:#0067b4;
  padding:0;
}
#topnav ul li div ul li div div ul li a:hover{
  color:#4399c7;
  background: none;
}

.megaHeader{
font-weight: bold !important;
font-size:1.1em !important;  
margin-bottom:4px;
}

Here's the JS, though I think this is a positioning/z-index issue.

    var mainNavigation = function(){  
    function megaHoverOver() {

        var subDiv = jQuery(this).find("div:last");
        var subDivCol = subDiv.find("ul");
        var ddParent = subDiv.parent().parent(); //2nd level parent LI
        //jQuery(this).parent().css({'height':'600px'}); 

        if (subDiv.length > 0) { //If row exists...
           //alert(jQuery(this).find("div:last").eq(0).attr("id"));
            var ddWidth = 0;
            var ulWidth = 0;
            var numUl = subDivCol.length;


                switch (numUl) {
                case 1:
                    ddWidth = "250"; //250
                    ulWidth = "245";
                    break;
                case 2:
                    ddWidth = "500";
                    ulWidth = "230";
                    break;
                case 3:
                    ddWidth = "932"; // 940 div adjusted for padding.
                    ulWidth = "290";
                    break;
                case 4:
                    ddWidth = "932";
                    ulWidth = "233";
                    break;
                case 5:
                    ddWidth = "932";
                    ulWidth = "186";
                    break;
                case 6:
                    ddWidth = "932";
                    ulWidth = "140";
                    break;
                case 7:
                    ddWidth = "932";
                    ulWidth = "120";
                    break;
                default:
                    ddWidth = "250";
                    ulWidth = "245";
                }


            subDiv.css({
                'width': ddWidth + "px",
                'margin-left': calcPos(ddParent, ddWidth, 2) + "px"
            }); 
            //jQuery(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin
            //Set UL widths
            subDivCol.css({
                'width': ulWidth 
            });
            jQuery(this).find("div ul:last").css({
                'border-right': 'none' 
            });

          subDiv.append('<div></div>'); 
          jQuery(this).find("div").children().andSelf().fadeTo('fast', 1).show(); //Find sub and fade it in

        } else { //If row does not exist...

        }

    }
    //On Hover Out

    function megaHoverOut() {

        jQuery(this).find("div div").parent().andSelf().stop().css({'display':'block'}).fadeTo('fast', 0, function () { //Fade to 0 opactiy
            jQuery(this).hide(); //after fading, hide it
        });
    }

    function rootOver() {
        //Set positioning of 2nd level items
        var levelTwo = jQuery(this).find("div:first").css({'display':'block'});
        var levelTwoUl = levelTwo.find("ul:first");
        var totalWidth = 0;


        levelTwoUl.children('li').each(function () {


            totalWidth += Math.floor(jQuery(this).outerWidth());   
        });
        var mPos = calcPos(jQuery(this), totalWidth, 1);
        //console.log('total LI width: ' + totalWidth);
        levelTwoUl.css({'margin-left' : mPos + "px"});
        levelTwo.stop().fadeTo('fast', 1).show(); //Fade in 2nd level //tweak for performance

    }

    function rootOut() {
        jQuery(this).find("div:first").stop().fadeTo('fast', 0, function () { //Fade to 0 opactiy
            jQuery(this).hide(); //after fading, hide it 

        });
    }

    function calcPos(parent, width, level) {
        var pos = Math.ceil(parent.css({'display':'block'}).position().left);
            var remaining = 940 - width;

            if(width >= 932){ // 3 or more columns left align 0
                return 0;
            }else if(width < (940 - pos)){
                return pos; 
            }else{

                if(pos > width && level != 2){
                    return 940 - pos;
                }else{
                    return 932 - width;
                }   

            }

    }
   return{
    init : function(){

        var config = {
            sensitivity: 2,
            // number = sensitivity threshold (must be 1 or higher)
            interval: 100,
            // number = milliseconds for onMouseOver polling interval
            over: megaHoverOver,
            // function = onMouseOver callback (REQUIRED)
            timeout: 500,
            // number = milliseconds delay before onMouseOut
            out: megaHoverOut // function = onMouseOut callback (REQUIRED)
        };
        var configRoot = {
            sensitivity: 2,
            interval: 100,
            over: rootOver,
            timeout: 500,
            out: rootOut // function = onMouseOut callback (REQUIRED)
        };

        //Set triggers for 1st & 2nd levels
        jQuery("div#topnav ul li").hoverIntent(configRoot);
        jQuery("div#topnav ul li div ul li").hoverIntent(config);
        }
    }
}();

mainNavigation.init();

Thanks in advance for any help. I appreciate it.

Answer 1

IE wasn't liking the fade jQuery effects in root level on hover functions. I updated as follows and this fixed the issue where the thrid level menu wasn't appearing in IE.

function rootOver() {
    //Set positioning of 2nd level items
    var levelTwo = jQuery(this).find("div:first").css({'display':'block'});
    var levelTwoUl = levelTwo.find("ul:first");
    var totalWidth = 0;


    levelTwoUl.children('li').each(function () {


        totalWidth += Math.floor(jQuery(this).outerWidth());   
    });
    var mPos = calcPos(jQuery(this), totalWidth, 1);

    levelTwoUl.css({'margin-left' : mPos + "px"});
    levelTwo.stop().show(); //Show 2nd level

}

function rootOut() {
    jQuery(this).find("div:first").stop().hide();
}