Wayfinder CSSplay basic drop down menu issues with IE7 and IE6

[[!Wayfinder? &startId=`0` &level=`2` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &innerRowTpl=`innerRowTpl` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd` &hereClass=`current`]]

<div class="menu">
  <ul>
    <li><a  class="first current" href="http://www.brightpixel.net/osprey/" title="Osprey Engineering - production optimization, control optimization and energy optimization">Home</a> </li>
    <li><a  class="hide" href="index.php?id=2" title="Company overview">Company</a> 
      <!--[if lte IE 6]>
    <a class="sub" href="index.php?id=2" title="Company overview">Company
    <table><tr><td>
    <![endif]-->
      <ul>
        <li><a href="index.php?id=3" title="News">News</a></li>
        <li><a href="index.php?id=4" title="Careers">Careers</a></li>
      </ul>
      
      <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]--> 
    </li>
    <li><a  class="hide" href="index.php?id=5" title="Services overview">Services</a> 
      <!--[if lte IE 6]>
    <a class="sub" href="index.php?id=5" title="Services overview">Services
    <table><tr><td>
    <![endif]-->
      <ul>
        <li><a href="index.php?id=12" title="Production Optimization">Production Optimization</a></li>
        <li><a href="index.php?id=13" title="Control Optimization">Control Optimization</a></li>
        <li><a href="index.php?id=14" title="Energy Optimization">Energy Optimization</a></li>
        <li><a href="index.php?id=15" title="Project Engineering">Project Engineering</a></li>
        <li><a href="index.php?id=16" title="Training">Training</a></li>
      </ul>
      
      <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]--> 
    </li>
    <li><a  class="hide" href="index.php?id=6" title="Products overview">Products</a> 
      <!--[if lte IE 6]>
    <a class="sub" href="index.php?id=6" title="Products overview">Products
    <table><tr><td>
    <![endif]-->
      <ul>
        <li><a href="index.php?id=7" title="mfg ADVISOR">mfg ADVISOR</a></li>
        <li><a href="index.php?id=8" title="Loop-Pro Product Suite">Loop-Pro Product Suite</a></li>
      </ul>
      
      <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]--> 
    </li>
    <li><a  class="menu" href="index.php?id=9" title="Case Studies">Case Studies</a> </li>
    <li><a  class="menu" href="index.php?id=10" title="Contact Us">Contact Us</a> </li>
    <li><a  class="last" href="index.php?id=11" title="Downloads">Downloads</a> </li>
  </ul>
</div>

.menu {width:950px; height:25px; font-size:11px; position:relative; z-index:100;font-family:Tahoma, Geneva, sans-serif; letter-spacing:0.4px; 
background:#635252;
background: -webkit-gradient(linear, left top, left bottom, from(#635252), to(#362D2D));
background: -moz-linear-gradient(top,  #635252,  #362D2D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#635252', endColorstr='#362D2D');
}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:950px; w\idth:948px; padding-left:2px;#635252}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul li ul {width:155px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;width:93px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:11px; text-decoration:none; color:#fff; width:79px; height:25px; border:1px solid #fff; border-width:0px 1px 0px 0px;line-height:24px; padding:0 5px 0 8px;
background:none repeat scroll 0 0 #362d2d;
background: -webkit-gradient(linear, left top, left bottom, from(#635252), to(#362D2D));
background: -moz-linear-gradient(top,  #635252,  #362D2D);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#635252', endColorstr='#362D2D');
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:79px; w\idth:78px;}

/* style the second level background */
.menu ul li ul a.drop, .menu ul li ul a.drop:visited {background:none no-repeat 0 0 #fff;}
/* style the second level hover */
.menu ul li ul a.drop:hover{background:none no-repeat 0 0 #fff;}
.menu ul li ul :hover > a.drop {background:none no-repeat 0 0 #fff;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul li ul {visibility:hidden;position:absolute;height:0;top:25px;left:0;border-top:1px solid #fff; width:155px;}
/* another hack for IE5.5 */
* html .menu ul li ul {width:155px; top:24px;t\op:25px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul li ul a, .menu ul li ul a:visited {background:none repeat scroll 0 0 #5c5151; color:#fff; height:auto; line-height:1.5em; padding:5px 10px; width:155px;border-width:0 0px 1px 0px;}
/* yet another hack for IE5.5 */
* html .menu ul li ul a, * html .menu ul li ul a:visited {width:155px;w\idth:133px;}

/* style the top level hover */
.menu a:hover, .menu ul li ul a:hover {background:none repeat scroll 0 0 #8678ea;
color:#fff;
cursor:pointer;
background: -webkit-gradient(linear, left top, left bottom, from(#5a5add), to(#2424e1));
background: -moz-linear-gradient(top,  #5a5add, #2424e1  );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5add', endColorstr='#2424e1');
}
.menu :hover > a, .menu ul li ul :hover > a {background:none repeat scroll 0 0 #8678ea;
color:#fff;
cursor:pointer;
background: -webkit-gradient(linear, left top, left bottom, from(#5a5add), to(#2424e1));
background: -moz-linear-gradient(top,  #5a5add, #2424e1  );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5add', endColorstr='#2424e1');
}

.menu ul li:hover ul li.current a  {
background:none repeat scroll 0 0  #5E5EFF;
}
.menu ul li:hover ul li a:hover {
background:none repeat scroll 0 0  #5E5EFF;
cursor:pointer;

}
.menu ul li.current a {
background:none repeat scroll 0 0 #2424e1;
background: -webkit-gradient(linear, left top, left bottom, from(#5a5add), to(#2424e1));
background: -moz-linear-gradient(top,  #5a5add, #2424e1  );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5add', endColorstr='#2424e1');
}
.menu ul li a.current {
background:none repeat scroll 0 0 #2424e1;
background: -webkit-gradient(linear, left top, left bottom, from(#5a5add), to(#2424e1));
background: -moz-linear-gradient(top,  #5a5add, #2424e1  );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5add', endColorstr='#2424e1');
}

<ul>
    [[+wf.wrapper]]
</ul>

<div[[+wf.classes]]>
    <ul>
        [[+wf.wrapper]]
    </ul>
</div>

<li><a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
<!--[if lte IE 6]>
    <a class="sub" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]
    <table><tr><td>
    <![endif]-->
    [[+wf.wrapper]]
<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

<li><a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
    [[+wf.wrapper]]
</li>

<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>