Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag for Germany

asked on

CSS Dropdownmenu not working in IE6

Hello experts.
I css dropdownmenu that is not working in IE6.
Any help.
html:
 
<style media="all" type="text/css">@import "menu_style.css";</style>
<div class="wrapper1">
	<div class="wrapper"  style="width:1050px;">
		<div class="nav-wrapper">
			<div class="nav-left"></div>
			<div class="nav">
				<ul id="navigation" style="width:988px";>
 
					<li class="#">
						<a href="../index.cfm" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Home</span>
							<span class="menu-right"></span>
						</a>
					</li>
 
					<li class="#">
						<a href="#" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">test1</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
   				  <ul>
         			   					<li>
									<a href="#" target="_self">subtest1</a>
								</li>
         			   					<li>
									<a href="#" target="_self">subtest2</a>
								</li>
         			   			
			   				</ul>
					</li>
               </ul>
			</div>
			<div class="nav-right"></div>
		<br><br>
	 </div>
	</div>
</div>
 
menu_style.css
.wrapper1{
	color: #44433f;	
	font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
	margin: 0;
	padding: 4px 0 0;
	}
	.wrapper1 a{
		color: #E5F2FB;
		text-decoration: none;
	}
	.wrapper1 a:hover {
		color: #09548B;
	}
	.wrapper1 p {
		margin: 0 0 17px;
		padding: 0;
		line-height: 18px;
	}
.wrapper {
	/*width: 710px;*/
	margin: 20px auto;
}
.nav {
	background: #fff url(images/nav_bg.png) repeat-x;
	float: left;
}
.nav-wrapper {
	clear: both;
	float: left;
}
.nav-left {
	background: url(images/nav_left.png) no-repeat top left;
	float: left;
	width: 11px;
	height: 41px;
}
.nav-right {
	background: url(images/nav_right.png) no-repeat top right;
	float: left;
	width: 11px;
	height: 41px;
}
.nav ul {
	/*width: 648px;*/
	height: 38px;
	float: left;
	margin: 0;
	padding-top: 3px;
	list-style: none;
	font-size: 15px;
}
.nav li {
	float: left;
	padding: 0 7px;
	background: url(images/split.png) no-repeat right center;
	position: relative;
	z-index: 1;
}
.nav li.last {
	background:none;
}
.nav li:hover {
	z-index:2;
}
.nav li a {
	display: block;
	line-height: 38px;
	overflow: hidden;
	float: left;
}
a .menu-left {
	background: url(images/menu_left.gif) no-repeat left top;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-mid {
	background: url(images/menu_mid.gif) repeat-x top left;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-right {
	background: url(images/menu_right.gif) no-repeat top left;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
	background-position: 0 -37px;
	line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
	color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
	display:block;
}
.nav li .sub {
	display: none;
	position: absolute;
	top: 27px;
	left: 6px;
	background: url(images/submenu_top.png) no-repeat;
	width: 186px;
	padding-top: 9px;
}
.nav li ul {
	background: url(images/submenu_bg.png) repeat-y;
	width: 162px;
	height: auto;
	margin: 0;
	padding: 0 12px 10px;
	list-style: none;
	font-size: 14px;
}
 
.nav li:hover li,
.nav li.active li {
	width: 100%;
	padding: 1px 0 2px;
	border-bottom: 1px #C1D9F0 dashed;
	background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
	color: #09548B;
	background: none !important;
	line-height: normal;
	width: 156px;
	padding: 8px 3px 3px;
	text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
	color: #fff;
	background: #165B9F !important;
	text-decoration: none;
	line-height: normal;
}
/**/
.nav .btm-bg {
	background: url(images/submenu_bottom.png) no-repeat;
	width: 205px;
	height: 9px;
	overflow: hidden;
	clear: both;
}
.content {
	width: 670px;
	background: transparent url(images/content_bg.png) repeat-y;
	float: left;
	padding: 10px 20px;
}
.content h1 {
	color: #333;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 10px;
	margin-bottom: -5px;
}
.content p {
	padding: 0 15px;
	text-align: justify;	
}
.content-bottom {
	width: 710px;
	background: transparent url(images/content_bottom.png) no-repeat;
	height: 13px;
	float: left;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of myderrick
myderrick
Flag of Ghana image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Panos

ASKER

Thank you for your help.
Regards
Panos
Glad to be of help.

MD