I created a container that houses a vertical sliding menu. It works great in Firefox, Safari, etc. But in IE7 (and 8) the 2nd level of elements won't show up when you mouse over them. Also, the menu works fine in IE7 (and 8) if you just upload it to a normal web server, but when you do it in dnn it's a no go. You can check out what I'm talking about at http://12.69.144.169/Personal/Checking/FirstChoiceNow/tabid/5440/Default.aspx ... It's the menu on the left. My css is below if that helps:
ul.accordian, ul ul {
padding:0;
margin:0;
border:0;
list-style-type:none;
overflow:hidden;
background:#f7f7f7;
width:160px;
text-align:left;
color:#fff;
border:0px;
font-family:Arial, Helvetica, sans-serif;
}
ul.accordian {
margin:0;
}
ul.accordian table {
border-collapse:collapse;
padding:0;
margin:0;
font-size:1em;
}
ul.accordian ul.accordiansub {
margin-left:10px;
}
ul.accordian li.drop {
border-bottom: dotted 1px #7A7A7A;
}
ul.accordian li {
text-indent: 10px;
}
ul.accordian li.drop a, ul.accordian li.drop a:visited {
display:block;
width:160px;
line-height:1.9em;
text-decoration:none;
color:#999;
font-size: 12px;
font-weight: bold;
}
ul.accordian li.drop a.last, ul.accordian li.drop a.last:visited {
display:block;
}
ul.accordian li.drop ul.accordiansub {
display: none;
}
ul.accordian li.drop:hover a, ul.accordian li.drop a:hover {
border:0;
color:#35857E;
font-weight:bold;
}
ul.accordian li.drop:hover ul.accordiansub, ul.accordian li.drop a:hover ul.accordiansub {
display:block;
width:150px;
border:0px;
}
ul.accordian li.drop:hover ul.accordiansub li a, ul.accordian li.drop a:hover ul.accordiansub li a {
color:#999;
font-weight:normal;
}
ul.accordian li.drop:hover ul.accordiansub li:hover a, ul.accordian li.drop a:hover ul.accordiansub li a:hover {
color:#333;
background-position:left;
background-image: url(dot.gif);
background-repeat:no-repeat;
}