为啥css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示。当鼠标移动到二级菜单，
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示。当鼠标移动到二级菜单，相关的知识，希望对你有一定的参考价值。
为什么css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示。当鼠标移动到二级菜单，整个二级菜单就都隐藏了？
#navigator
height:30px;
width:720px;
float:left;
margin-left:130px;
margin-top:7px;
#navigator ul
margin:0px;
padding:0px;
list-style-type:none;
display:block;
#navigator li
float:left;
font-weight:bold;
text-align:center;
font-size:14px;
#navigator li a
display:block;
width:84px;
line-height:28px;
color:#FFF;
text-decoration:none;
#navigator ul ul
width:84px;
height:110px;
background-color: #066;
display:none;
#navigator ul ul li a
color: #F00;
#navigator ul li:hover ul
display:block;
background-color: #FFF;
我加入position：realitive 然后就正常了 为什么啊
你可以这样写，当鼠标指向一级节点时，它的二级节点为显示，而其他一级节点的二级节点隐藏；当鼠标离开时不需要做函数处理。
下面是我做的一个简单的例子，希望对你有帮助
<!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>无标题文档</title>
<style type="text/css">
li
float:left;
border:1px solid red;
li ul li
position:relative;
border:none;
background:#0FF;
float:none;
li ul
display:none;
</style>
<script type="text/javascript" >
function testShow(num)
//alert("the show");
for(var i=1; i<5; i++)
var obj=document.getElementById("test"+i);
obj.style.display="none";
var obj1=document.getElementById("test"+num);
obj1.style.display="block";
</script>
</head>
<body>
<input type="button" value="click" onclick="testShow()" />
<ul>
<li onmouseover="testShow(1)">第一个第一层
<ul id="test1">
<li>第一个第二层</li>
<li>第一个第二层</li>
</ul>
<li onmouseover="testShow(2)">第二个第一层
<ul id="test2" >
<li>第二个第二层</li>
<li>第二个第二层</li>
</ul>
<li onmouseover="testShow(3)">
第三个第一层
<ul id="test3">
<li>第三个第二层</li>
<li>第三个第二层</li>
</ul>
</li>
<li onmouseover="testShow(4)">
第四个第一层
<ul id="test4" >
<li>第四个第二层</li>
<li>第四个第二层</li>
</ul>
</li>
<li></li>
</ul>
</body>
</html> 参考技术A 从你的代码可以看出 display：none为不显示 如果要其显示的话为display：block；当鼠标移动到一级导航li：hover改变display才会显示，也就是移动到li的内容中才能显示，当你移到二级导航中时加上一个relative为相对定位，占元素空间默认为li的一部分，因此显示正常 参考技术B 求助 在哪加啊？ 参考技术C 啊 参考技术D 请设置绝对定位
为啥 PayPal Iframe 停留在固定导航栏上方？
【中文标题】为啥 PayPal Iframe 停留在固定导航栏上方？【英文标题】：Why does PayPal Iframe stays above the fixed navbar?为什么 PayPal Iframe 停留在固定导航栏上方？ 【发布时间】：2021-02-19 07:45:46 【问题描述】：我已通过此链接 here 添加了 PayPal Checkout 按钮。我遇到的问题是存在 PayPal 按钮的 iframe 停留在页面上我的固定导航栏上方。为什么会发生这种情况，如何将其放回顶部？
我已尝试阅读文档，但似乎没有提及此行为。我也尝试将 z-index 更改为我的导航栏，但这没有帮助。
这是我的导航栏的 css。
.top
background-color: black;
height: 50px;
width: 100%;
position: fixed;
z-index: 5;
top: 0;
overflow-x: hidden;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
color: white;
<nav class="top"></nav>【问题讨论】：
请提供您网站的链接 【参考方案1】：在您的 CSS 中，定位 iframe 元素并尝试添加此代码
position: relative;
z-index: 0;
【讨论】：
你也可以定位到paypal按钮的父div。以上是关于为啥css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示。当鼠标移动到二级菜单，的主要内容，如果未能解决你的问题，请参考以下文章
关于css二级菜单显示， 看了一个例子， 鼠标放在一级菜单时候， 二级菜单就显示出来了
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）