与创建下拉菜单的css/html混淆

我正在尝试制作一个带有导航栏和表单的网页。在我的菜单中我有下拉菜单，但问题是当我将鼠标指针悬停在下拉菜单的链接上方，并且鼠标指针也接触顶部表单时，下拉菜单消失。只有当我将表单的z索引设置为-1时，下拉菜单才起作用，但当我将下拉菜单的z-index设置为10，将表单的z-index设置为1时，情况就不一样了。为什么？ 以下是html代码：

正文{
保证金：0；
填充：0；
}
.主导航{
位置：固定；
宽度：100%；
高度：50px；
背景:#212121 ;；
}
.nav_存根{
宽度：100%；
高度：50px；
可见性：隐藏；
}
.主菜单{
保证金：0；
填充：0；
列表样式类型：无；
身高：100%；
宽度：100%；
}
.主菜单李{
位置：相对位置；
身高：100%；
显示：内联块；
左边距：10px；
}
.主菜单李a{
显示：块；
框大小：边框框；
填充：10px；
文字装饰：无；
身高：100%；
线高：30px；
文本对齐：居中；
颜色：#fff；
过渡：0.5s；
}
.主菜单李a：悬停{
颜色：#000；
背景：#fff；
}
博萨先生{
宽度：100%；
高度：100vh；
}
.下拉菜单内容{
宽度：100%；
位置：绝对位置；
背景:#212121 ;；
最高：100%；
显示：无；
填充：0；
}
.下拉列表{
保证金：0；
显示：块；
}
.下拉：悬停。下拉内容{
显示：块；
盒影：2p2px10pxRGBA（0,0,0,0.3）；
}
.下拉列表{
z指数：10；
}
/*形式*/
.我的表格{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：20px；
宽度：50%；
框大小：边框框；
保证金：自动；
盒子阴影：5px 5px 10px rgba（0,0,0,0.3），-5px-5px 10px rgba（0,0,0,0.3）；
;
边界半径：10px；
z指数：1；
}

注册
用户名：
用户名长度必须至少为8个字符
密码：
密码长度必须至少为10个字符，包含一个大写字母和
一个特殊的角色
密码（再次）：
名字：
姓氏：
注册

您的问题有简单的解决方案。只需将

z-index

设置到导航栏，如下所示

.main-nav {
   position: fixed;
   width: 100%;
   height: 50px;
   background: #212121;
   z-index: 100
}

正文{
保证金：0；
填充：0；
}
.主导航{
位置：固定；
宽度：100%；
高度：50px；
背景:#212121 ;；
z指数：100
}
.nav_存根{
宽度：100%；
高度：50px；
可见性：隐藏；
}
.主菜单{
保证金：0；
填充：0；
列表样式类型：无；
身高：100%；
宽度：100%；
}
.主菜单李{
位置：相对位置；
身高：100%；
显示：内联块；
左边距：10px；
}
.主菜单李a{
显示：块；
框大小：边框框；
填充：10px；
文字装饰：无；
身高：100%；
线高：30px；
文本对齐：居中；
颜色：#fff；
过渡：0.5s；
}
.主菜单李a：悬停{
颜色：#000；
背景：#fff；
}
博萨先生{
宽度：100%；
高度：100vh；
}
.下拉菜单内容{
宽度：100%；
位置：绝对位置；
背景:#212121 ;；
最高：100%；
显示：无；
填充：0；
}
.下拉列表{
保证金：0；
显示：块；
}
.下拉：悬停。下拉内容{
显示：块；
盒影：2p2px10pxRGBA（0,0,0,0.3）；
}
.下拉列表{
z指数：10；
}
/*形式*/
.我的表格{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：20px；
宽度：50%；
框大小：边框框；
保证金：自动；
盒子阴影：5px 5px 10px rgba（0,0,0,0.3），-5px-5px 10px rgba（0,0,0,0.3）；
;
边界半径：10px；
z指数：1；
}

注册
用户名：
用户名长度必须至少为8个字符
密码：
密码长度必须至少为10个字符，包含一个大写字母和
一个特殊的角色
密码（再次）：
名字：
姓氏：
注册

设置负Z索引会将元素放置在

主体后面

。你需要一个正的z指数。我还建议在50px的body元素中添加一个padding top，以清除主菜单提示：CSS中有许多

code

需要改进，以便与现代web浏览器和响应性配合。@jbutler483，谢谢你解释负z指数。也谢谢你的填充想法。在我使用空div覆盖固定区域之前。谢谢。在设置导航的z指数后，它起作用了，但我不太明白为什么。你能解释一下吗？@Barracuda z-index不仅仅是这里的问题：提示：CSS中有很多代码需要改进，才能与现代的web浏览器和响应能力配合使用。@Alwayshelling，如果你有任何建议（书籍、文章等），如果您为一个元素设置的z-index属性的值大于另一个元素的z-index，则该元素相对于另一个元素位于顶部位置，我将不胜感激。类似于另一层顶部的层@BarracudaExactly@总是这样是对的。您的代码需要改进。学校帮助你。