IE7下li中的absolute元素，在下一个li显示？

<li id="nLi">             
         <a href="#">学习<em></em></a>
            <ul class="sub">
                     <li>
                        <a href="#">
                            视频
                        </a>
                    </li>
                    <li>
                       <a href="#">
                            课程
                       </a>
                   </li>
             </ul>
    </li>
    <li id="nLi">
         <a href="#">预告</a>
    </li>
.sub {
  display: none;
  background-color: #fff;
  width: 76px;
  position: absolute;
  top: 24px;
  z-index: 999;
}
.sub li {
  zoom: 1;
  float:none;
}

.header_nav li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  float: left;
}
.sub li a {
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  color: #139667;
  border-bottom: 1px solid #139667;
  display: block;
  width: 76px;
  padding: 0;
}
.header_nav>li a {
  padding: 0 5px;
  border-bottom: 2px solid transparent;
  line-height: 21px;
  margin-right: 37px;
}