CSS hover menu, form select, IE6 bug, ok elsewhere ...

[kigoobe]

Hi friends

I was working on a CSS hover menu, and though it seems to be working elewhere, IE6 is giving a problem. The problem is -



As you can see, the hover menu is going behind the select dropdowns.

The concerned CSS is -

/* CSS Document */
#nav {
	position: absolute;
	background: #FFF;
	border: 1px; /* borders the bottom of the top nav */
	border-width: 1px 0;
	margin-left: -439px;
	}
 
.button {
	width: 30px;
	float: left;
	}
 
.parent {
	position: relative; 
	}
 
.floatfix {margin-right: -3px;}
 
.dropdown { /* rules for dropdown div */
	width: 250px;
	position: absolute;		
	left: -3000px;
	top: auto; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */	
	background: url(intranet/img_intranet/bgfix.gif);
	}
 
.dropdown div {
	width: 220px;
	position: absolute;		
	left: -3000px;
	top: 0;  
	background: url(intranet/img_intranet/bgfix.gif);
	text-align: left; /* needed because IE misapplies text centering to boxes */
	}
 
.dropdown ul { 
  width: 255px; /* tweaked so that dropdowns appear to "line up" with top links */
  margin: 0 30px 30px 10px; /* creates "sticky hovering" zones for dropdowns */
  padding-top:25px;
  padding-bottom:15px;
  } /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */
 
.dropdown div ul {margin: 30px 30px 30px 0px;} /* creates "sticky hovering" zones for flyouts */
 
.four .dropdown ul {width: 255px;} /* modifies width for rightmost "visible" dropdown (tweak) */
 
.four .dropdown div ul {margin: 30px 0 30px 30px; position: relative;} /* rule reversal for "visible" right drop flyouts */
 
#nav li {text-align: left;}
 
#nav a {
  display: block;
  color: #0071BD;
	font-weight: normal;
	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	padding: 0px 0px 0px; 
	border-right: 1px solid #FFF;  /* makes the dividers between the top nav links */
	}
 
#nav a:hover {
	text-decoration: underline;
	color: #D02890;
	}
 
.four a {border-right: 0;} /* kills right border on last top link */
 
#nav ul ul a {
  color: #0071BD;
  border-right: 0; /* negates right border for dropdowns and flyouts */
  border-bottom: 1px solid #FFF;  /* borders the bottoms of the dropdown and flyout links */
  }
 
.dropdown li {
  position: relative; 
  vertical-align: bottom; /* IE5/win bugfix */
  padding-left:15px;
  }
 
.parent:hover, .parent.sfhover {background-image: url(intranet/img_intranet/bgfix.gif);} 
 
.parent:hover div.dropdown, .parent.sfhover div.dropdown {left: -11px;} /* hover rule for dropdowns */ 
 
.dropdown li:hover div, .dropdown li.sfhover div { /* hover rule for flyouts */
	left: 180px; /* this value controls the amount of flyout "overlap" */
	top: -26px; /* this value controls the amount of flyout vertical offset */
	}
 
.four li:hover div, .four li.sfhover div { /* reversed flyout rules for rightmost drop flyouts */
	left: -210px; 
	top: -26px;
	}
 
#nav div.mini-zone { /* special hover zone that covers the "danger corner" */
  padding: 0;
  width: 15px;
	height: 15px; 
	font-size: 1px;
	left: -3000px;
	bottom: -15px;
	top: auto;	
	background: url(intranet/img_intranet/bgfix.gif);
	}
 
#nav .dropdown li:hover div.mini-zone, #nav .dropdown li.sfhover div.mini-zone { /* hover rule for mini-zones */
	left: auto;
	right: 8px;
	top: auto;
	}
 
#nav .four li:hover div.mini-zone, #nav .four li.sfhover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */
	left: 8px;
	}
 
#nav ul { list-style-type:none; }
 
/*XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX*/
 
.one ul {border-left:1px solid #FAB909;}
.one li {background-image:url(intranet/img_intranet/icone_o.gif);background-repeat: no-repeat;}
.two ul {border-left:1px solid #175CCC;}
.two li {background-image:url(intranet/img_intranet/icone_n.gif);background-repeat: no-repeat;}
.three ul {border-left:1px solid #009933;}
.three li {background-image:url(intranet/img_intranet/icone_m.gif);background-repeat: no-repeat;}
.four ul {border-left:1px solid #D02890;}
.four li {background-image:url(intranet/img_intranet/icone_p.gif);background-repeat: no-repeat;}
.parent ul {
  background: #FFF;
  margin-left:20px;
  padding-left:20px;
  text-indent:5px;
  list-style-type: none;
}
.parent ul li {background-position: left center;}
 
.dropdown div ul {background: #eda;} /* colors BG of flyouts */ 
.dropdown div ul a {color: #400;} /* colors text of  flyouts */ 
 
#nav img {
  border: 0 none;
  display: block;
}
/*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/
 
.one {z-index: 10;}
.two {z-index: 20;}
.three {z-index: 30;}
.four {z-index: 40;}
.four:hover, .four.sfhover {z-index: 20;}
 
* html .button .dropdown li {
height: 1%;
margin-left: -16px;
margin-left: 0;
}
/* */
 
* html #nav a
 {height: 1%;}
 
.brclear { /* Use a break with this class to clear float containers */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
 
.Style1 {font-size: 8px}

The concerned hover is getting called in html as -

<div id="nav">
	<ul>
		<li class="button">
			<div class="parent three">
				<a href="#">
					<img src="img_intranet/icone_m.gif" height="9" width="9" alt="" />
				</a>
				<div class="dropdown">
					<img src="img_intranet/back_o.gif" height="44" width="295" alt="" />
					<ul>
						<li><a href="#">Gérer les definitions (glossaire)</a></li>
						<li><a href="#">Gérer les documents, les supports</a></li>
						<li><a href="#">Gérer le référentiel du parrainage</a></li>
						<li><a href="#">Gérer la foire aux questions</a></li>
						<li><a href="#">Gérer le guide du parrainage</a></li>
						<li><a href="#">Gérer l'aide</a></li>
						<li><a href="#">Gérer le texte deroulant</a></li>
						<li><a href="#">Gérer les liens partenaires</a></li>
						<li><a href="#">Activité des parrains</a></li>
						<li><a href="#">Le parrainage, un atout pour le secteur</a></li>
					</ul>
				</div>		 
		</li>
	</ul>
</div>

The concerned javascript which is doing the hover trick for IE6 is

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Can anyone tell me what's the issue here ... would be a great help ...
Best

[Bling]

This is a bug of the browser it's self. The only remedy i know for this is to hide the visibility of such elements when your hover menu is in use.

[kigoobe]

Bling, thanks. Yeah, I am doing some googling since then and have come across some discussions ... have to find a solution that matches my case ...

Edit:

I've solved this issue. Since it was an IE6 only problem, I have added a conditional javascript function which adds an iframe in between the select boxes and hover menu. I found this a better solution compared to hidding select boxes as hiding only those selects that come in given areas sitewide is a very tedious affair and hiding all selects on hover was looking ugly as it was hiding other selects that were outside of the hover menu area.