设置二级菜单的Z-index。。。一级菜单把弹出的二级菜单覆盖了，怎么办？

春风十里耶耶耶 2011-04-08 11:59:22
引用
<!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=gb2312" />
<title>nav</title>

<script type="text/javascript" language="javascript">
// JavaScript Document
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace("over", "");
}
}
}
}
}
window.onload=startList;
</script>

<style type="text/css">
<!--
body {
font: normal 11px verdana;
z-index:100px;
}
li{
z-index:100;
}
nav {
z-index:20;
}
fly{
z-index:10;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 300px; /* 菜单的宽度 */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
z-index:20;
position: absolute;
left: 250px; /* 二级菜单的距离 */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {

display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 10px;
border: 2px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a {height: 1%; }
/* End */
li:hover ul, li.over ul {display: block; } /* The magic */
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">主页</a></li>
<li><a href="#">系统应用</a>
<ul>
<li id="fly"><a href="#">网上报修</a></li>
<li id="fly"><a href="#">在线报餐</a></li>
<li id="fly"><a href="#">会议室预约</a></li>
</ul>
</li>
<li style="z-index:100;"><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li style="z-index:100;"><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>

我把源码放到这里，谁复制下来，调式出结果。

1.二级菜单在显示时被覆盖了，怎么解决？ （纵向时显示）
2.变成横向的怎么办？


两个问题，都要。

但不是变成横向的，在把二级菜单显示出来，而是在纵向时显示出来。

请认真点
...全文
575 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
吾好玩 2011-08-03
  • 打赏
  • 举报
 回复
<!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=gb2312" />
<title>nav</title>

<script type="text/javascript" language="javascript">
// JavaScript Document
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace("over", "");
}
}
}
}
}
window.onload=startList;
</script>

<style type="text/css">
<!--
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 300px; /* 菜单的宽度 */
border-bottom: 1px solid #ccc;
z-index:999;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 250px; /* 二级菜单的距离 */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 10px;
border: 2px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a {height: 1%; }
/* End */
li:hover ul, li.over ul {display: block; } /* The magic */
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">主页</a></li>
<li><a href="#">系统应用</a>
<ul>
<li id="fly"><a href="#">网上报修</a></li>
<li id="fly"><a href="#">在线报餐</a></li>
<li id="fly"><a href="#">会议室预约</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>

春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
哦了，杠杠的。，
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 27 楼 dygaalove 的回复:]
引用 26 楼 huangwenquan123 的回复:
引用 25 楼 dygaalove 的回复:
引用 24 楼 huangwenquan123 的回复:
你试试看，我这边测试可以了！

HTML code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type……
[/Quote]
你把下面的考进去重新覆盖掉，因为之前测试的时候我把那个a的样式去掉了，忘记加进来了！
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

  <title>nav</title>



  <script type="text/javascript" language="javascript">

// JavaScript Document

startList = function()  

{

  navRoot = document.getElementById("nav");

  for (i=0; i<navRoot.childNodes.length; i++)  

  {

      node = navRoot.childNodes[i];

      if (node.nodeName=="LI")  

      {

          node.onmouseover=function()  

          {

              if(this.children[1]!=null){

                  this.children[1].style.top=this.offsetTop+"px";

                  this.children[1].style.display="block";

              }

          }

          node.onmouseout=function()  

          {

              if(this.children[1]!=null)

              this.children[1].style.display="none";

          }

      }

  }

}

window.onload=startList;

</script>



  <style type="text/css">

<!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 300px; /* 菜单的宽度 */

border: 1px solid #ccc;

border-bottom:0;

position:relative;

background:#ffffff;

}

/* Styles for Menu Items */

ul li a{

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 10px;

}

li{border-bottom: 1px solid #ccc;}

li .sonul {

position:absolute;

left: 250px; /* 二级菜单的距离 */

display: none;

z-index:999;

line-height:15px;

}

-->

</style>

</head>

<body>

  <ul id="nav">

  <li><a href="#">主页</a></li>

  <li><a href="#">系统应用</a>

  <ul class="sonul">

  <li><a href="#">网上报修</a></li>

  <li><a href="#">在线报餐</a></li>

  <li><a href="#">会议室预约</a></li>

  </ul>

  </li>

  <li><a href="#">Services</a>

  <ul class="sonul">

  <li><a href="#">Web Design</a></li>

  <li><a href="#">Internet Marketing</a></li>

  <li><a href="#">Hosting</a></li>

  <li><a href="#">Domain Names</a></li>

  <li><a href="#">Broadband</a></li>

  </ul>

  </li>

  <li><a href="#">Contact Us</a>

  <ul class="sonul">

  <li><a href="#">United Kingdom</a></li>

  <li><a href="#">France</a></li>

  <li><a href="#">USA</a></li>

  <li><a href="#">Australia</a></li>

  </ul>

  </li>

  </ul>

</body>

</html>
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 26 楼 huangwenquan123 的回复:]
引用 25 楼 dygaalove 的回复:
引用 24 楼 huangwenquan123 的回复:
你试试看，我这边测试可以了！

HTML code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=……
[/Quote]

明天开贴，今天没有分啊。 明天凑够50分，给你开贴。

另外还有一个问题：
ul li a {

这里设置内容无效、、、
怎么回事啊。
color：red；
background-color：red；
TEXT-DECORATION:none；//去掉下划线
}

无效？

huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 25 楼 dygaalove 的回复:]
引用 24 楼 huangwenquan123 的回复:
你试试看，我这边测试可以了！

HTML code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</……
[/Quote]呵呵 开帖就不用了！帮人帮己！自己也在复习一下！
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 24 楼 huangwenquan123 的回复:]
你试试看，我这边测试可以了！

HTML code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</title>

<script type="……
[/Quote]

是的，这次可以用了，真的很感谢你，等下为你开贴仅表示感谢。
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
你试试看，我这边测试可以了！




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

<head>

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

  <title>nav</title>



  <script type="text/javascript" language="javascript">

// JavaScript Document

startList = function()  

{

  navRoot = document.getElementById("nav");

  for (i=0; i<navRoot.childNodes.length; i++)  

  {

      node = navRoot.childNodes[i];

      if (node.nodeName=="LI")  

      {

          node.onmouseover=function()  

          {

              if(this.children[1]!=null){

                  this.children[1].style.top=this.offsetTop+"px";

                  this.children[1].style.display="block";

              }

          }

          node.onmouseout=function()  

          {

              if(this.children[1]!=null)

              this.children[1].style.display="none";

          }

      }

  }

}

window.onload=startList;

</script>



  <style type="text/css">

<!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 300px; /* 菜单的宽度 */

border: 1px solid #ccc;

border-bottom:0;

position:relative;

background:#ffffff;

}

/* Styles for Menu Items */

ul li{

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 10px;

}

li{border-bottom: 1px solid #ccc;}

li .sonul {

position:absolute;

left: 250px; /* 二级菜单的距离 */

display: none;

z-index:999;

line-height:15px;

}

-->

</style>

</head>

<body>

  <ul id="nav">

  <li><a href="#">主页</a></li>

  <li><a href="#">系统应用</a>

  <ul class="sonul">

  <li><a href="#">网上报修</a></li>

  <li><a href="#">在线报餐</a></li>

  <li><a href="#">会议室预约</a></li>

  </ul>

  </li>

  <li><a href="#">Services</a>

  <ul class="sonul">

  <li><a href="#">Web Design</a></li>

  <li><a href="#">Internet Marketing</a></li>

  <li><a href="#">Hosting</a></li>

  <li><a href="#">Domain Names</a></li>

  <li><a href="#">Broadband</a></li>

  </ul>

  </li>

  <li><a href="#">Contact Us</a>

  <ul class="sonul">

  <li><a href="#">United Kingdom</a></li>

  <li><a href="#">France</a></li>

  <li><a href="#">USA</a></li>

  <li><a href="#">Australia</a></li>

  </ul>

  </li>

  </ul>

</body>

</html>
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 22 楼 huangwenquan123 的回复:]
你试下效果吧，ie 6 7 8 ff都测试可以了

HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</title>

<script ……
[/Quote]
真的很感谢你。

现在样式可以了，但是当我鼠标放到二级菜单中时，不能选择在线报餐，从网上报修移动到在线报餐时，就变成Services下的二级菜单了，没有判断这个啊。

是不还要写个js方法啊，哥们拜托了，一会开贴感谢你。
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
你试下效果吧，ie 6 7 8 ff都测试可以了
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

  <title>nav</title>



  <script type="text/javascript" language="javascript">

// JavaScript Document

startList = function()  

{

  navRoot = document.getElementById("nav");

  for (i=0; i<navRoot.childNodes.length; i++)  

  {

  node = navRoot.childNodes[i];

  if (node.nodeName=="LI")  

  {

  node.onmouseover=function()  

  {

  if(this.children[1]!=null){

  this.children[1].style.top=this.offsetTop+"px";

  this.children[1].style.display="block";

  }

  }

  node.onmouseout=function()  

  {

  if(this.children[1]!=null)

  this.children[1].style.display="none";

  }

  }

  }

}

window.onload=startList;

</script>



  <style type="text/css">

<!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 300px; /* 菜单的宽度 */

border: 1px solid #ccc;

border-bottom:0;

position:relative;

}

li{border-bottom: 1px solid #ccc;}

li .sonul {

position:absolute;

left: 250px; /* 二级菜单的距离 */

display: none;

z-index:2;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 10px;

}

-->

</style>

</head>

<body>

  <ul id="nav">

  <li><a href="#">主页</a></li>

  <li><a href="#">系统应用</a>

  <ul class="sonul">

  <li><a href="#">网上报修</a></li>

  <li><a href="#">在线报餐</a></li>

  <li><a href="#">会议室预约</a></li>

  </ul>

  </li>

  <li><a href="#">Services</a>

  <ul class="sonul">

  <li><a href="#">Web Design</a></li>

  <li><a href="#">Internet Marketing</a></li>

  <li><a href="#">Hosting</a></li>

  <li><a href="#">Domain Names</a></li>

  <li><a href="#">Broadband</a></li>

  </ul>

  </li>

  <li><a href="#">Contact Us</a>

  <ul class="sonul">

  <li><a href="#">United Kingdom</a></li>

  <li><a href="#">France</a></li>

  <li><a href="#">USA</a></li>

  <li><a href="#">Australia</a></li>

  </ul>

  </li>

  </ul>

</body>

</html>
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 huangwenquan123 的回复:]
调兼容太累了，期待楼下给出答案！
[/Quote]
哥们，你别放弃啊，ie7.0都成功了，现在放弃你不觉得可惜吗。


我是一点都不懂，要不然我也不至于来这里求助，帮忙帮到底吗。
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
调兼容太累了，期待楼下给出答案！
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 dygaalove 的回复:]
引用 17 楼 huangwenquan123 的回复:
引用 16 楼 dygaalove 的回复:
引用 15 楼 huangwenquan123 的回复:
引用 14 楼 dygaalove 的回复:
引用 13 楼 huangwenquan123 的回复:
不是这个效果？


就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children……
[/Quote]
也就是说，一级菜单和二级菜单，文字的四周一直都保持有边框，什么情况下都不消失。就像13楼的那样。
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 huangwenquan123 的回复:]
引用 16 楼 dygaalove 的回复:
引用 15 楼 huangwenquan123 的回复:
引用 14 楼 dygaalove 的回复:
引用 13 楼 huangwenquan123 的回复:
不是这个效果？


就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children[1].为空或不是对象。

你用的是ie哪个版本，我的是……
[/Quote]

边框就是13楼的样式，就是你ie7.0下的样式、

此段代码在ie6.0下没有ie7.0下的效果。
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 dygaalove 的回复:]
引用 15 楼 huangwenquan123 的回复:
引用 14 楼 dygaalove 的回复:
引用 13 楼 huangwenquan123 的回复:
不是这个效果？


就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children[1].为空或不是对象。

你用的是ie哪个版本，我的是ie6.0，

刚才用的是ie7 ff测试，……
[/Quote]我刚才有用ie6调试过了，剩下的只是边框的样式了！边框看你要怎么设置了！
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 huangwenquan123 的回复:]
引用 14 楼 dygaalove 的回复:
引用 13 楼 huangwenquan123 的回复:
不是这个效果？


就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children[1].为空或不是对象。

你用的是ie哪个版本，我的是ie6.0，

刚才用的是ie7 ff测试，现在改了，因为你主页下面没有那个ul，刚没判断，现在二级菜单……
[/Quote]

哦，谢谢你了。

我一边调式，一边等待ie6.0的人来发言，给出代码。


谁有ie6.0帮忙看看。。

小弟是初学者，这类问题都不知道从哪里着手啊。
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 dygaalove 的回复:]
引用 13 楼 huangwenquan123 的回复:
不是这个效果？


就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children[1].为空或不是对象。

你用的是ie哪个版本，我的是ie6.0，
[/Quote]
刚才用的是ie7 ff测试，现在改了，因为你主页下面没有那个ul，刚没判断，现在二级菜单可以在上面，不过ie6和ie7样式还有点区别，只能你自己调了
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

  <title>nav</title>



  <script type="text/javascript" language="javascript">

// JavaScript Document

startList = function()  

{

  navRoot = document.getElementById("nav");

  for (i=0; i<navRoot.childNodes.length; i++)  

  {

  node = navRoot.childNodes[i];

  if (node.nodeName=="LI")  

  {

  node.onmouseover=function()  

  {

  if(this.children[1]!=null){

  this.children[1].style.top=this.offsetTop+"px";

  this.children[1].style.display="block";

  }

  }

  node.onmouseout=function()  

  {

  if(this.children[1]!=null)

  this.children[1].style.display="none";

  }

  }

  }

}

window.onload=startList;

</script>



  <style type="text/css">

<!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 300px; /* 菜单的宽度 */

border-bottom: 1px solid #ccc;

position:relative;

}

li{border-bottom: 1px solid #ccc;}

li .sonul {

position:absolute;

left: 250px; /* 二级菜单的距离 */

display: none;

z-index:2;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 10px;

border: 2px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}

-->

</style>

</head>

<body>

  <ul id="nav">

  <li><a href="#">主页</a></li>

  <li><a href="#">系统应用</a>

  <ul class="sonul">

  <li><a href="#">网上报修</a></li>

  <li><a href="#">在线报餐</a></li>

  <li><a href="#">会议室预约</a></li>

  </ul>

  </li>

  <li><a href="#">Services</a>

  <ul class="sonul">

  <li><a href="#">Web Design</a></li>

  <li><a href="#">Internet Marketing</a></li>

  <li><a href="#">Hosting</a></li>

  <li><a href="#">Domain Names</a></li>

  <li><a href="#">Broadband</a></li>

  </ul>

  </li>

  <li><a href="#">Contact Us</a>

  <ul class="sonul">

  <li><a href="#">United Kingdom</a></li>

  <li><a href="#">France</a></li>

  <li><a href="#">USA</a></li>

  <li><a href="#">Australia</a></li>

  </ul>

  </li>

  </ul>

</body>

</html>

春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 huangwenquan123 的回复:]
不是这个效果？
[/Quote]

就是这个效果啊，你的代码在我的ie6.0中看到的，完全不一样啊，而且还是有错误的。children[1].为空或不是对象。

你用的是ie哪个版本，我的是ie6.0，
huangwenquan123 2011-04-11
  • 打赏
  • 举报
 回复
不是这个效果？






春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复


如果可以看到图片，就不必打开下面的网址。
http://hi.csdn.net/space-574304-do-album-picid-786025.html


谁能给出图片的效果啊，就是在现在的基础上，把二级菜单的显示度优先就可以吧？
但是要怎么写呢，小弟初学实在是没有接触过Css啊，谁给下代码俺也好参考下。
春风十里耶耶耶 2011-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 hongleidy5000 的回复:]
引用 9 楼 huangwenquan123 的回复:

ie ff都测试成功，我只能说调样式真TM辛苦！



LZ 看人家多不容易撒,
这东西一般都和CSS有关系了!
[/Quote]

都很不容易啊，我一点不懂CSS，根本就调式不出来。


但是楼上的答案也不是我要的效果啊。
加载更多回复（9）
使用 swipe的轮播图，结果导航栏的二级菜单被swipe的轮播图遮住了。 解决方法：给二级菜单的所有li加上 z-index:9999； 问题就解决了
使用 swipe的轮播图，结果导航栏的二级菜单被swipe的轮播图遮住了。 解决方法：给二级菜单的所有li加上 z-index:9999; 问题就解决了 。不为别的，就想互相帮助各位同行
二级导航菜单使用方法以及常见问题
二级导航菜单 使用css的diaplay属性设置二级菜单的显示情况。 具体思路如下： 1.先制作静态的一级菜单和二级菜单，最好使用ul和li元素,以及a标签和float属性，还有要把二级菜单的位置定好，最好使用绝对定位，不占位置。（） 2.第二步，制作二级菜单不显示。通过设置css样式,使用diaplay:none;就可以实现了。 3.第三步，显示二级菜单，可以通过设置css样式,a标签的伪类选择器(a:hover)实现。 <!DOCTYPE html> <html lang="en"
【Web前端HTML+CSS基础——定位(二级菜单，弹出层和轮播图的应用)】
四个属性值同时设置会产生矛盾，开发时尽量避免，默认情况，一般左右冲突的时候以左为主，一般上下冲突以上为主。一个元素，只要position的取值不是static,认为该元素就是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖。绝对定位和固定定位中，margin为auto的时候，会自动吸收剩余空间。包含块不一样，绝对定位的包含块怎么找的，相对定位的包含块怎么找的。设置z-index，通常情况下，该值越大，越靠近用户。包含块的不同：固定为视口(浏览器的可视窗口)
子菜单显示于顶层的方法
对于下拉的子菜单，要显示在网页的顶层，可以用position属性来定位，再结合z-index，即可达到让菜单显示于网页顶层的目的。 一般是在css样式表中对下拉菜单做如下设置（假设下拉菜单的类名为：drop-down）: .drop-down { position:absolute； z-index:10000; … … } 如果主网页也有设置position 和z-index，那么.drop-d...
二级菜单ie中被下面的div遮挡解决问题
这个很可能是误设置了position属性，如POSITION: relative;解决这个办法在当前层设置z-index都是无效的，即使将弹出层所在父层的z-index设置到999，可弹出层依然会被底下的div遮挡住。造成这个原因是层的叠加原因，叠加原则中指出，非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章