关于相对定位position:relative 定位存在浏览器兼容性问题,IE6是否存在该问题的bug呢?请教高手!谢谢!


想做一个主菜单导航,当鼠标放上去时,可以出现下级菜单,部分代码如下:    <ul>
          <li class="licell" id="menu2" onmouseover="changeMenubg(this);" onmouseout="backMenubg(this);">首页   
  </li>
  <li class="liline"></li>   
  <li class="licell" id="menu1" onmouseover="changeMenubg(this);showSubmenu(this)" onmouseout="backMenubg(this);hiddenSubmenu(this)">关于非点   
                            <ul class="submenu_ul" id="submenu1" style="position:relative;top:4px;left:0px;visibility:hidden;";onmouseover="this.style.visibility='visible'" >
                                     <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">非点简介</li>
                             <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">非点特色</li>
                             <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">非点精英</li>
                             <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">核心目标</li>
                             <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">设计观点</li>
                                  </ul>      
  </li>
  <li class="liline"></li>   
  <li class="licell" id="menu3" onmouseover="changeMenubg(this);showSubmenu(this)" onmouseout="backMenubg(this);hiddenSubmenu(this)">创意设计
  
            <ul class="submenu_ul" id="submenu3" style="position:relative;top:4px;left:0px;visibility:hidden;";onmouseover="this.style.visibility='visible'" >
                                      <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">LOGO设计</li>
                                      <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">广告设计</li>
                              <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">POP设计               </li>
                              <li class="submenu_li" onmousemove="this.className='on_submenu_li'" onmouseout="this.className='submenu_li'">海报设计              </li>
                                   </ul>   
  </li>
  <li class="liline"></li>
                        ......                  </ul>思路很简单,下一级菜单用<ul>装好,然后做一下css修饰.默认该ul标签是隐藏的,当鼠标入上去的时候,再通过onmouseover事件让它再显示,离开则再隐藏.
现在碰到了一个浏览器的兼容性的问题,在IE7与FF下都通过了测试,显示正常,只是有在IE6的就会撑开下面的div块.如下图所示:
导航为:
在IE6下显示下一级菜单(撑开了下面元素位置):
在IE7与FF下显示下一级菜单:
针对于这一个问题,我对ul的定位采用position:absolute的定位,这种定位是可以解决,但是不太好,还是存在其它问题的.
现在只是想用position:relative相对定位,不知道如何解决!我也尝试用z-index来解决,但学是解决不了.
在此请教各们html+css高手,谢谢!