[Steven Gardner]

Hi Guys,

Its been a while since i last posted anything but i have been very busy. I hope you can help me sort this problem I'm having with a wordpress dropdown menu.

If you have a look at my site in any modern browser you can see a sub when you hover over Cage-Hire(great!).
http://www.urbandist...cefife.com/mma/
However, if you look at the site in IE6 or below the sub-menu does'nt display.
I believe there may be issues with :hover but i'm not sure.

I have tried to install IE6 on my computer with "Internet Explorer Collection" to test but I cant, so i can only test it in IE5.5.

Here is the wordpress code i have to work with

<ul class="pureCssMenu pureCssMenum">
<?php wp_list_pages('title_li='); ?>
		</ul>

This is my CSS

/*CSS MENU */
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu {margin:0;list-style:none;padding:0px 2px 2px 0px;background:none;}
ul.pureCssMenu ul { margin:0;list-style:none;padding:0px 2px 2px 0px;background-color: #1B1B19;background-repeat:repeat; border:1px solid #333;}
ul.pureCssMenu table {border-collapse:collapse}
ul.pureCssMenu {display:block;zoom:1;float:right; clear:both;position:relative;z-index:200;}
ul.pureCssMenu ul{width:auto;}
ul.pureCssMenu li{display:block;margin:2px 0px 0px 2px;font-size:0px;text-shadow:2px 2px 2px #000;}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {outline-style:none;}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;vertical-align:middle;text-align:left;text-decoration:none;padding:2px 6px 2px 10px;_padding-left:0;font-size:14px;color: #9bc942;text-decoration:none;cursor: pointer;}
ul.pureCssMenu span{overflow:hidden;}
ul.pureCssMenu li {float:left;}
ul.pureCssMenu ul li {float:none;}
ul.pureCssMenu ul a {padding:6px 10px 4px 10px;text-align:left;white-space:nowrap;}
ul.pureCssMenu li.sep{text-align:left;padding:0px;line-height:0;height:100%;}
ul.pureCssMenu li.sep span{float:none;	padding-right:0;width:3px;height:100%;display:inline-block;background-color:#cccccc #111111 #111111 #cccccc;background-image:none;}
ul.pureCssMenu ul li.sep span{width:100%;height:3px;}
ul.pureCssMenu li:hover{position:relative;}
ul.pureCssMenu li:hover>a{color: #9bc942;text-decoration:none;}
ul.pureCssMenu li a:hover{position:relative;color: #FFFFFF;text-decoration:none;}
ul.pureCssMenu li.dis a {color: #666 !important;}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;height:16px;}
ul.pureCssMenu ul img {width:16px;height:16px;}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{display:block;background-image:url(./images/arr_white.gif);background-position:right center;background-repeat: no-repeat;padding-right:12px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white.gif); overflow:visible}
ul.pureCssMenu a:hover span{_background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}

All help would be much appreciated.