关于相对定位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块.如下图所示:
导航为: 关于相对定位position:relative 定位存在浏览器兼容性问题,IE6是否存在该问题的bug呢?请教高手!谢谢!

在IE6下显示下一级菜单(撑开了下面元素位置): 关于相对定位position:relative 定位存在浏览器兼容性问题,IE6是否存在该问题的bug呢?请教高手!谢谢!

在IE7与FF下显示下一级菜单: 关于相对定位position:relative 定位存在浏览器兼容性问题,IE6是否存在该问题的bug呢?请教高手!谢谢!

针对于这一个问题,我对ul的定位采用position:absolute的定位,这种定位是可以解决,但是不太好,还是存在其它问题的.
现在只是想用position:relative相对定位,不知道如何解决!我也尝试用z-index来解决,但学是解决不了.
在此请教各们html+css高手,谢谢!

7 个解决方案

#1

不好意思,贴错了点,IE7与FF正常!

在IE7与FF下显示下一级菜单:
关于相对定位position:relative 定位存在浏览器兼容性问题,IE6是否存在该问题的bug呢?请教高手!谢谢!

#2

参阅[ css探索之旅] 纯CSS仿微软经典菜单

#3

div 层

z-index

#4

试试 _position:fixed
z-index设了？
也有可能你的相对定位所相对元素设置得不太好，把距离最近的那个元素先设置为绝对定位，然后再设置相对定位。

#5

我没有设z-index,因为好象没有用似的.IE6还是不行呀

#6

二级菜单用absolute试试看。

将一级菜单的<li>设成relative。他的下一级设为absolute。应该是可以的。。。。

#7

参考下面的,或者只是做修改成你需要的效果:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JavaScript下拉菜单</title>

    <style type="text/css">

        * {

            padding:0;

            margin:0;

        }

        body {

            font-family:verdana, sans-serif;

            font-size:small;

        }

        #navigation, #navigation li ul {

            list-style-type:none;

        }

        #navigation {

            margin:20px;

        }

        #navigation li {

            float:left;

            text-align:center;

            position:relative;

        }

        #navigation li a:link, #navigation li a:visited {

            display:block;

            text-decoration:none;

            color:#000;

            width:120px;

            height:40px;

            line-height:40px;

            border:1px solid #fff;

            border-width:1px 1px 0 0;

            background:#c5dbf2;

            padding-left:10px;

        }

        #navigation li a:hover {

            color:#fff;

            background:#2687eb;

        }

        #navigation li ul li a:hover {

            color:#fff;

            background:#6b839c;

        }

        #navigation li ul {

            display:none;

            position:absolute;

            top:40px;

            left:0;

            margin-top:1px;

            width:120px;

        }

        #navigation li ul li ul {

            display:none;

            position:absolute;

            top:0px;

            left:130px;

            margin-top:0;

            margin-left:1px;

            width:120px;

        }

    </style>

<!--兼容IE6、IE7和FF-->

    <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

</head>

<body>

    <ul id="navigation">

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

            <a href="#">栏目1</a>

            <ul>

                <li><a href="#">栏目1->菜单1</a></li>

                <li><a href="#">栏目1->菜单2</a></li>

                <li><a href="#">栏目1->菜单3</a></li>

                <li><a href="#">栏目1->菜单4</a></li>

            </ul>

        </li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

            <a href="#">栏目2</a>

            <ul>

                <li><a href="#">栏目2->菜单1</a></li>

                <li><a href="#">栏目2->菜单2</a></li>

                <li><a href="#">栏目2->菜单3</a></li>

                <li><a href="#">栏目2->菜单4</a></li>

                <li><a href="#">栏目2->菜单5</a></li>

            </ul>

        </li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

            <a href="#">栏目3</a>

            <ul>

                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                    <a href="#">栏目3->菜单1</a>

                    <ul>

                        <li><a href="#">菜单1->子菜单1</a></li>

                        <li><a href="#">菜单1->子菜单2</a></li>

                        <li><a href="#">菜单1->子菜单3</a></li>

                        <li><a href="#">菜单1->子菜单4</a></li>

                    </ul>

                </li>

                <li><a href="#">栏目3->菜单2</a></li>

                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                    <a href="#">栏目3->菜单3</a>

                    <ul>

                        <li><a href="#">菜单3->子菜单1</a></li>

                        <li><a href="#">菜单3->子菜单2</a></li>

                        <li><a href="#">菜单3->子菜单3</a></li>

                    </ul>

                </li>

            </ul>

        </li>

    </ul>

</body>

</html>

#1

#2