dropdown menu, not working in IE6

Question

simirnov 0 Newbie Poster

15 Years Ago

I have made a dropdown menu wich is working fine in firefox and chrome, but in IE6, it is not working! i am typing the css code below, please any css guru, remove the bug from the given code if possible!

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav li a {
	font:bold 12px Tahoma, "MS Sans Serif";
	color:#FFF;
	display: block;
	width: 135px;
	height:38px;
	text-align:center;
	text-decoration:none;
	padding:22px 0 0 0;
	
}

#nav li {
	
	float: left;
	width: 135px;
}
#nav li:hover {
	background:url(../images/hover1.jpg) no-repeat;
	float: left;
	width: 135px;
	
	
}
#nav ul li:active {
	background:url(../images/hover1.jpg) no-repeat 100% 0;
	float: left;
	width: 135px;
}
#nav li  ul {
	display: none;
	height:auto;
	position: absolute;
	width: 150px;
	left: -999em;
	z-index: 3;
	background-color:#4bcbd8;
}

#nav li:hover ul{
	display:block;
	height:auto;
	background-color:#4bcbd8;
	border:solid 1px #0d96a4;
	left: auto;
	text-decoration:none;
	
}
#nav li:hover ul a:hover{
	background-color:#8be5ed;
	color:#999;
	left: auto;
	text-decoration:none;
	
}
#nav li:hover ul, #nav li.sfhover ul {

	left: auto;
	background-color:#8be5ed;
	display:block;
	
}

web-design

Edited 15 Years Ago by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

3 Contributors
3 Replies
168 Views
2 Years Discussion Span
Latest Post 12 Years Ago Latest Post by mrinaldey

dipak_passion 0 Light Poster

15 Years Ago

Hi!
LI hover doesn't support in IE6, for better and compatible results you can use the code like following

#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.05em;
		margin-top : -1.35em;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		font-weight : bold;
		text-decoration : none;
		background-color : white;
		border : 1px solid black;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : black;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}

And for LI hover support use the following samll JS Script :

<script type="text/javascript"><!--//--><![CDATA[//><!--
 
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);
 
//--><!]]></script>

Hope you can get the solution.

Thanks.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

simirnov 0 Newbie Poster · Answer 1 · 2009-10-21T08:01:41+00:00

hey, thanx deepak! it works in IE6! but i want to make a horizontal nav bar with vertical dropdown like daniweb's nav bar! on hover state, a vertical menu opens in it!
How should i make my nav bar inline and the dropdown menu list opening in vertical style?
please help!
Thank you!

mrinaldey 0 Newbie Poster · Answer 2 · 2012-05-25T12:17:00+00:00

dropdown menu, not working in IE6

I have made a dropdown menu horizontal nav bar with vertical dropdown

.dd_menu {background:none; padding:0px; margin:0; list-style-type:none; height:25px;}
.dd_menu li {float:left; height:25px;}
.dd_menu li a {padding:9px 10px; display:block; color:#000; text-decoration:none; font:11px verdana, arial,  sans-serif;}
.dd_menu li:hover a {text-decoration:none;}

.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none; }
.dd_menu li:hover {position:relative; background:#ffeec2; border:solid 0px #444;}
.dd_menu li:hover ul {left:0px; top:25px; background:none; padding:0px; border:0px solid grey; width:229px; /*background: url(../images/LeftMenuBG.jpg) repeat-y top;*/}
.dd_menu li:hover ul li {height:20px; border:0px solid #6a8ccb; border-bottom:0px solid #6a8ccb; }
.dd_menu li:hover ul li a {padding:0px; margin-left:0px; display:block; font-size:11px; width:229px; line-height:20px; text-indent:40px; color:#000; background-color:#f6f6f6; background: url(../images/LeftMenuBG.jpg) repeat-y top; text-decoration:none; border:0px solid transparent; float:left; border-bottom:1px solid #000;}
.dd_menu li:hover ul li a:hover {background:#ffeec2; border:1px solid #6a8ccb; width:227px;}

wich is working fine in firefox and chrome, but in IE6, it is not working! i am typing the css code below, please any css guru, remove the bug from the given code if possible!