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

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开发者_Python百科 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/

---

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