Css IE 6和7错误使第三层导航浮动到远处

我在试图弄清楚为什么我的下拉导航设置在IE6和IE7中应该设置的位置时遇到了问题。你能给我的任何帮助都能救我的命

下拉导航的css文件

#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;
}

链接是：

注意事项/建议/问题：

• 考虑一下如何在两个层次上实现这一点。 我很难在IE中达到第二个级别（你可能也想做的事情）

• 考虑使用垂直子菜单。用户更容易导航

• 问题。每年会有多少内容进入？如果不太多，也许你可以分组年的内容

我为导航重新设计了css，我认为这是一个好的开始——如果你愿意的话。

希望这是有意义的