css menu problem on IE

Hi,

Current, I follow http://wphacks.com/how-to-make-categories-drop-down-menu/ and create a drop dawn menu. It works fine on any browsers except IE. I dont know how to fix. Drop menu is hidden from content.

Could you please check for me

#nav{
	position: absolute;
	left: 240px;
	bottom: 14px;
	display: block;
	height: 27px;
	border-left: 1px solid #555;
}
#nav, #nav ul {
	list-style: none;
}
#nav a, #nav a:hover {
	display: block;
	text-decoration: none;
}
#nav li {
	float: left;
	display: block;
	height: 27px;
}
#nav a, #nav a:visited {
	display: block;
	height: 27px;
	line-height: 27px;
	text-transform: uppercase;
	color: #fff;
	padding: 0 10px 0 10px;
	border-right: 1px solid #555;
	font-weight: bold;
	font-family: helvetica, arial;
	font-size: 1.2em;
}
#nav a:hover {background: url(img/menu_on.png) repeat-x;}
#nav .current_page_item a, #home .on {
	background: url(img/menu_active.png) repeat-x;
}
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 172px;
	border-bottom: 1px solid #555;
	float: none;
	z-index:1000;
}
#nav li li {
	width: 172px;
	border-top: 1px solid #555;
	background: #000;
}
#nav li li a, #nav li li a:visited {
	display: block;
	height: 27px;
	line-height: 27px;
	text-transform: uppercase;
	color: #fff;
	padding: 0 10px 0 10px;
	border-right: 1px solid #555;
	font-weight: bold;
	font-family: helvetica, arial;
	font-size: 1.2em;
}
#nav li li a:hover, #nav li li a:active {
	background: url(img/menu_on.png) repeat-x;
}
#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 {
	left: auto;
}
a.main:hover {
	background:none;
}

Code (markup):

thank you

 

IE6 it's not working because it is too old
IE6 does not support :hover on other tags but a

Use some javascript or jquery instead.

http ://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

 

Dear friend IE6 support only anchor tag

 

What if somebody turns scripts off?
I guess adding an A tag in the top level menu item is better than using js.
Just a suggestion

 

do you know how to fix that code? I just use css only for seo reason

 

@myst_dg

"What is somebody turns scripts off?" I suppose over 90% of visitors have their js turned on. At least that's what I've got from my stats.

 

its true... and it really depends on who your site is targetted towards... a wise guy on the net once set... do you even want to cater to those who purposely turn off their js?

anyways op you can use js without necessarily calling jquery

I'm working out of my head here I'm not a js programmer at all ok?

your link or div would need a tag like:

onmouseover="nav_over('id_of_this_thing')"

Code (markup):

then you'll need some js script... like this (not tested... don't have anything to test right now)

<script type="text/javascript">
function nav_over(id) {
 var obj = document.getElementById(id);
 obj.style.background = "url(img/menu_on.png) repeat-x";
}
function nav_over(id)  {
  var obj = document.getElementById(id);
  obj.style.background = "";
}
}
</script>

Code (markup):