Wayfinder with flyout tmpl In IE7

Hello everybody!
Great to involve in MODx community!

I’ve been asked to make a site for a school.
They have curiously design yet, but whatever..

I’ve made menu with wayfinder flyout config.

But in IE7 submenu works bad.
While moving from one item to another, submenu dissapears.

In FF and IE6 it’s allright

http://www.co654.com

here is code.

config:

<?php
$level = 3;

$parentClass = ’hide’;
$outerClass = ’menu’;

$outerTpl = ’@CODE:<div[+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>’;

$rowTpl = ’@CODE:<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>’;

$parentRowTpl = ’@CODE:<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]-->
<!--[if lt IE 7]>
<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]-->
<!--[if lt IE 7]>
</td></tr></table>
</a>
<![endif]-->


</li>’;

$innerTpl = ’@CODE:<ul>
[+wf.wrapper+]
</ul>’;

$cssTpl = ’@CODE:<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/flyout.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/flyout_ie.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/flyout_ie.css" />
<![endif]-->’;

?>

flyout.css

/* CSS Document */
/* common styling */
.menu {font-family: Geneva, Arial, Helvetica, sans-serif;
width: 130px;
height: 150px;
position: relative;
margin: 50px 0;
font-size: 12px;
margin: 50px 0;
font-style: italic;
font-weight: bold;

}
.menu ul li a, .menu ul li a:visited { display:block;
margin: 0 0 5px 25px;
text-decoration:none;
color: #660000;
width: 140px;
height: 25px;
text-align: left;
border: 0px solid #fff;
border-width: 0px 0px 0px 0px;
background: #ECD500;
line-height: 19px;
font-size: 12px;
padding-left: 4px;
}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#B0A74F;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:145px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#660000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#B0A74F; color:#660000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#FFFFFF;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#660000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#660000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

flyout_ie.css:

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none; text-decoration:none;}
.menu ul li a:hover ul li a.hide {display:none; text-decoration:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79; text-decoration:none;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:145px; width:105px; text-decoration:none;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#FFFFFF; text-decoration:none;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#FFFFFF; width:150px; text-decoration:none;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#fff; text-decoration:none;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#FFFFFF; text-decoration:none;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#FFFFFF; text-decoration:none;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff; text-decoration:none;}

I think the problem is: i can’t send IE7 to correct CSS
How i can do it in right way?

Sounds like a 1-px difference in rendering.

Sometimes you just have to put an IE specific bit of CSS in a conditional block in the head of the template, or at least have an IE-specific css file that gets loaded using the IE conditional block in your template.