Heim >Web-Frontend >HTML-Tutorial >下拉菜单被ul挡住的问题_html/css_WEB-ITnose
下拉菜单被ul挡住的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:351540Durchsuche
<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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：height为100%-50px，应该怎么设置呢？_html/css_WEB-ITnoseNächster Artikel：层遮盖不住下面的行，这是为啥，是我哪理解的不对吗_html/css_WEB-ITnose