下拉菜单被ul挡住的问题_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

下拉菜单被ul挡住的问题_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-24 12:22:35

원래의

1521명이 탐색했습니다.

<style>/*导航*/#webmenu {width:950px;margin:4px auto;z-index:999;}#webmenu ul {padding-left:20px;height:27px;background: #000000;}#webmenu li {float:left;font-size:14px;padding:6px 0;color:#FFFFFF;margin-right:5px;position:relative;}#webmenu a:link,#webmenu a:visited {color:#FFFFFF;font-weight:bold;}/*下拉菜单*/#webmenu li div a:link,#webmenu li div a:visited{ display:block; text-decoration:none; color:#FFFFFF; width:100%; height:24px; line-height:24px; text-align:center;}#webmenu li div a:hover{color:#FFFFFF; background:#000000; text-decoration:none;}#webmenu li div{display:none; position:absolute; top:25px; left:0; width:100px;border: 1px solid #000000;border-left: 6px solid #000000; background: #000000;z-index:9999;}</style><script>function displaySubMenu(li){var subMenu = li.getElementsByTagName("div")[0];subMenu.style.display = "block";}function hideSubMenu(li){var subMenu = li.getElementsByTagName("div")[0];subMenu.style.display = "none";}</script><div id="webmenu">	<ul><li> <a href="/" target="_top">首页</a></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)")>| <a href="" target="_top">网站运营</a><div><a href="" target="_top">站长新闻</a><a href="" target="_top">新手教程</a><a href="" target="_top">经验心得</a><a href="" target="_top">访谈</a><a href="" target="_top">推广策划</a><a href="" target="_top">搜索SEO</a></div></li></ul><ul><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)")> <a href="/class_11.html" target="_top">互联网</a><div><a href="/class_12.html" target="_top">电子商务</a><a href="/class_13.html" target="_top">站长休闲</a><a href="/class_14.html" target="_top">网络编程</a></div></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)")>| <a href="/class_17.html" target="_top">国内新闻</a><div><a href="/class_19.html" target="_top">社会新闻</a><a href="/class_18.html" target="_top">娱乐新闻</a></div></li></li></ul></div>

로그인 후 복사

回复讨论(解决方案)

你期望的是什么效果

你期望的是什么效果
效果就是在下拉菜单不被下面的ul挡住了，代码在ie8是正常的，ie6和ie7有问题

ie6有z-index bug,我把你的代码删掉了一部分:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>无标题文档</title>  <style>  /*导航*/  #webmenu {width:950px;margin:4px auto;}  #webmenu ul {width:100%;padding:0px;height:27px;background: #000000;list-style:none;}  #webmenu li {float:left;font-size:14px;padding:0;background:#F00;margin-right:5px;position:relative;}  a.an{background-color:#fff;}  .c{display:none; position:absolute; top:25px; left:0; width:100%;border: 1px solid #000000;border-left: 6px solid #000000; background: #ddd;z-index:9999;float:left;}  .s li{z-index:1;}  .d li{z-index:2;}  </style>  <script>  function displaySubMenu(li){  var subMenu = li.getElementsByTagName("div")[0];  subMenu.style.display = "block";}     function hideSubMenu(li){  var subMenu = li.getElementsByTagName("div")[0];  subMenu.style.display = "none";}  </script>  </head>    <body>  <div id="webmenu">      <ul class="d">      <li>               <a href="/" target="_top">首页</a>      </li>      <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">            | <a class="an" href="" target="_top">网站运营</a>            <div class="c">              <a href="" target="_top">站长新闻</a>              <a href="" target="_top">新手教程</a>              <a href="" target="_top">经验心得</a>              <a href="" target="_top">访谈</a>              <a href="" target="_top">推广策划</a>              <a href="" target="_top">搜索SEO</a>            </div>       </li>       </ul>              <ul class="s">       <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">              <a class="an" href="/class_11.html" target="_top">互联网</a>             <div class="c">               <a href="/class_12.html" target="_top">电子商务</a>               <a href="/class_13.html" target="_top">站长休闲</a>               <a href="/class_14.html" target="_top">网络编程</a>             </div>       </li>       <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">             | <a class="an" href="/class_17.html" target="_top">国内新闻</a>             <div class="c">                <a href="/class_19.html" target="_top">社会新闻</a>                <a href="/class_18.html" target="_top">娱乐新闻</a>             </div>       </li>       </ul>  </div>  </body>  </html>

로그인 후 복사