CSS Menu with fly out not working or displaying properly in IE6

2 replies [Last post]

Thu, 2010-05-27 12:36

ballr

Offline

Last seen: 2 years 50 weeks ago

newbie

Timezone: GMT-4

Joined: 2010-05-27

Posts: 2

Points: 3

Hi Everyone!

I have been trying to style a CSS based menu specifically for IE6 (about a fourth of our users are on IE6). I can't figure out how to widen the area for the

. It is squeezed and causing the text to be split into multiple lines.

In addition, the "fly-out" part isn't working? Do I need the csshover.htc file for that to work?

AND to throw another wrench in the works, I am building the site and menu in Umbraco (open-source dot net CMS). Below is the CSS I'm using in the ie6_styles.css file.

/*	************************************************************
	Specialty Market Flyout Menu
	************************************************************
*/
.menu2{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	width:325px; 
	height:160px; 
	position:absolute; 
	font-size:12px; 
	margin:0 0; 
	display:block;
}
.menu2 ul {
	padding:0; 
	margin:0 0 0 -10px; 
	list-style-type: none; 
	background:#eee; 
	width:325px; 
	height:160px; 
	border:1px solid #2356B6;
	display:block;
}
.menu2 ul li ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	overflow:hidden; 
	top:0; 
	left:200px;
	display:block;
}
.menu2 ul li {
	display:block;
	float:left;
	width:325px;
 
}
.menu2 ul li a, .menu2 ul li a:visited {
	display:block; 
	float:left; 
	text-decoration:none; 
	color:#999999; 
	height:auto; 
	line-height:25px; 
	width:190px; 
	background:transparent; 
	padding-left:10px;
}
 
//////* end top level of fly out menu *///////
 
 
* html .menu2 ul li a, * html .menu2 ul li a:visited {
	width:100px; 
	w\idth:90px;}
 
.menu2 table {
	border-collapse:collapse; 
	border:0; 
	margin:0; 
	padding:0px; 
	font-size:0em; 
	position:absolute; 
	left:0; 
	top:0;
}
 
/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
 
.menu2 ul li:hover a,
.menu2 ul li a:hover{
	background:#2356B6; 
	color:#fff;
}
 
.menu2 ul li:hover {position:relative; z-index:100;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}
 
.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	height:auto; 
	border:1px solid #2356B6; 
	background:#7a7a7a;
	padding: 0 15px 0 0; 
	overflow:visible;
	width:250px;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
	display:block; 
	background:transparent; 
	color:#fff; 
	line-height:15px; 
	padding:5px 0 5px 10px; 
	height:auto; 
	text-decoration:underline; 
	width:250px;
}
 
.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
	background:#2356B6; 
	color:#fff; 
	width:250px;
}
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	overflow:hidden; 
	top:0; 
	left:105px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	height:auto; 
	color:#000; 
	padding:0; 
	border:1px solid #2356B6; 
	list-style-type:none; 
	background:#7a7a7a;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
	display:block; 
	background:transparent; 
	color:#fff;
}
 
.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
	background:#2356B6; 
	color:#fff;
}
 
/*	************************************************************
	End Specialty Market Flyout Menu
	************************************************************
*/