首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

下拉菜单被ul挡住的有关问题

2013-07-16 
下拉菜单被ul挡住的问题style/*导航*/#webmenu {width:950pxmargin:4px autoz-index:999}#webmenu ul

下拉菜单被ul挡住的问题

<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>


[解决办法]
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>

热点排行