IE 6 and 7 bug making third tier navigation float to away - css

Question

I'm having problems trying to figure out why my drop down navigation is settling under where they are suppose to in IE 6 and IE 7. Any help you could give me would be life saving for me.
the css file for the drop down nav
#nav-bar { /*Container Div*/
width: 950px;
height: 45px;
background-image:url(images/nav-bar-background.jpg);
background-repeat: no-repeat;
margin: 7px 0 2px 0;
z-index:999;
position:relative;
padding:0;
}
/*First Level*/
#nav-bar ul {
padding: 10px;
text-align:center;
margin-top: 6px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding:0 9px 40px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
/*First Level HOVER*/
#nav-bar ul li a:hover {
background-image: url(nav.png);
background-repeat: repeat-x;
}
* html ul#nav-bar li a {
height:37px;
margin-top:-10px;
}
ul#nav-bar>li a:hover, ul#nav-bar>li:hover {
background-position:0px -20px;
height:37px;
text-decoration:none;
}
* html ul#nav-bar li a:hover, * html ul#nav-bar li:hover, * html ul#nav-bar li.hover {
background-position:0px -20px;
height:27px;
}
#nav-bar ul ul {
background-image:url(images/secondtierbg.gif);
display:none;
}
#nav-bar ul ul li {
width:100px;
}
#nav-bar ul ul li a {
line-height:26px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding: 10px 9px 20px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
#nav-bar li:hover ul, #nav-bar li.hover ul {
display:inline;
position:absolute;
left:0;
top:44px;
width:950px;
height:26px;
margin:0 auto;
padding: 0;
z-index:200;
}
* html #nav-bar li.hover ul {
height:37px;
}
/*
#nav-bar li:hover li {
list-style:none;
display:inline;
color:#fff;
margin:5px 0px 0 20px;
padding:0;
}
*/
#nav-bar li:hover li a, #nav-bar li.hover li a {
color:#fff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top: 10px;
padding: 5px;
text-decoration:none;
}
#nav-bar li:hover li a:hover {
background:none!important;
}
/* THIS IS FOR DROP DOWNS */
#nav-bar ul ul ul {
visibility: hidden;
background-image: none;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav-bar ul ul ul li {
display: block;
width:100px;
height: auto;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
font-size: 11px;
background-color:maroon;
border-style: solid;
border-color: white;
border-width: 1px 1px 0 1px;
padding: 5px 0;
float: none;
clear: both;
}
#nav-bar ul ul #firstrange li {
width:100px;
}
#nav-bar ul ul ul li:last-child {
border-bottom: 1px solid white;
/*background:transparent;*/
}
#nav-bar ul ul ul li a{
cursor:pointer;
line-height:14px;
}
#nav-bar ul ul li:hover ul {
visibility: visible;
left:0;
position:absolute;
margin-top:0;
top:31px;
z-index:220;
}
#nav-bar ul ul li:hover {
position:relative;
}
the link is:
http://www.paysonsecure.com/colonialwarsct/

Answer 1

notes/advice/question:
Think about how you can make this work in two levels.
I had difficulties trying to get the second level to show in IE(Something you might wanna work on too).
Consider having a vertical sub-menu. It's easier for the user to navigate.
Question. How much content is going to go in each year? If not much, maybe you can group years content.
I re-worked the css for the navigation I think its a good start - if you wish.
http://jsfiddle.net/EvRem/1/
Hope this made sense