I used the wayfinder chuck on my site to make a dropdownmenu. It look in Firefox but I can’t get it correct in IE 6 and 7.
This is the link:
http://www.stipnuenen.nl/
I used the css menu, here you see a example in firefox:

Thats looks good, perfect!
But with IE:

In Internet Explorer it become a mess, the menu is in the wrong place.
This is code I used:
body {
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
font-size: 80%;
}
/********** Global styles **********/
.cl {
clear:both;
}
p {
margin: 0 0 0 0px;
}
/********** Body **********/
#container {
width: 673px;
margin: 0px auto;
background:#ee3f12;
padding:0px
}
/********** Top **********/
#topleft {
color: #FFFFFF;
width: 208px;
height: 140px;
}
#topleft h2 {
text-align: center;
font-size:2em;
font-weight: normal;
color: #fff;
margin:0;
padding:0px;
margin-bottom:40px;
}
#topleft h3{
text-align:center;
font-style:italic;
}
#topright {
float: right;
height: 140px;
width: 452px;
text-align: right;
background:#fff;
}
#topright h4 {
font-size:2em;
color: #F01E1E;
text-align:center;
}
#gallery {
width: 673px;
height:140px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
}
#gallery img{
margin:0;
padding:0;
border:0;
}
/********** Body **********/
#content {
width: 452px;
float: right;
background-color: #fff;
}
/********** Menu **********/
.menu {
position:relative;
z-index:1000;
font-size:90%;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:221px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}
/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:30px;
line-height:30px;
width:221px;
color:#000;
background:#eeedef;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
.menu a:hover{
color:#fff;
background:#949e7c;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
#menu {
background: #000000;
border-bottom: 5px solid #FFFFFF;
height:30px;
margin-left:5px;
}
#menu ul{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:33.3%;
text-align:center;
}
#menu li.last a{
border-right:none;
}
#menu a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
border-right:1px solid #fff;;
}
#menu a:hover {
background: #000000;
color: #fff;
}
#menu li.here a{
background:#000000;
color:#fff;
}
/********** Main Content **********/
#pad {
padding: 12px;
color: #000;
background:#c7b793;
margin-left:5px;
}
#pad h3 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
}
#pad a{
color: #0f0b03;
}
/********** Left Column **********/
#left {
width: 213px;
color: #FFFFFF;
padding: 0px;
}
#left h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #fff;
}
#left #menuBlock ul{
list-style:none;
padding:0;
margin:0;
}
#left #menuBlock a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
background: #cf9f25;
margin-bottom:2px;
}
#left #menuBlock li ul li a{
padding-left:40px;
}
#left #menuBlock li ul{
display:none;
}
#left #menuBlock li.here ul{
display:block;
}
#left #menuBlock li.here a, #left #menuBlock a:hover{
background: #f1bc35;
color: #fff;
}
#left #menuBlock li.here ul li a{
color: #0f0b03;
background: #cf9f25;
}
#left #menuBlock li.here ul li a:hover{
background: #f1bc35;
color: #fff;
}
/********** Footer **********/
#footer {
background-color: #000000;
padding: 12px;
width: 649px;
color:#000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #fff;
}
#footer a{
color:#000;
}
#attrib{
display:none;
}
And the Chuck:
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
[+wf.wrapper+]
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
And the page code:
<div class="menu">
[!Wayfinder? &startId=`0` &level=`4` &parentRowTpl=`wfParentRow`!]
</div>
What can I to to make it looking good in IE?, like the firefox version?