Javascript 尝试修复页面顶部带有下拉菜单的导航栏

我试图在为一个类制作的web应用程序中添加一个导航栏，我想在其中使用一个下拉菜单（包含的内容太多，无法直接显示所有内容）

我希望将该条固定在页面顶部，但当我放入

位置时：fixed，下拉菜单将停止工作。
这有什么办法吗？我只是把
的位置：fixed
在错误的位置，或与具有
位置的下拉内容冲突：绝对也许

（我对网络非常陌生，所以如果您看到我可以更改/批准的任何其他内容，请让我知道！非常感谢您的建议）


ul{
列表样式类型：无；
保证金：0；
排名：0；
位置：固定；
宽度：100%；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：#111；
}
li.下拉列表{
显示：内联块；
}
.主动{
背景色：#4CAF50；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
}
.下拉：悬停.下拉内容{
显示：块；
}











将导航放到一个图层中。并使该层具有固定位置


.navbar顶部{
保证金：0；
填充：0；
宽度：100%；
排名：0；
位置：固定；
}
保险商实验室{
列表样式类型：无；
保证金：0；
排名：0；
/*位置：固定*/
宽度：100%；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：#111；
}
li.下拉列表{
显示：内联块；
}
.主动{
背景色：#4CAF50；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
}
.下拉：悬停.下拉内容{
显示：块；
}







你不应该申请
职位：固定的
UL


您可以使用div扭曲UL并将其应用于固定位置。

以下是实现此目标的一种方法（）：


.main标题{
高度：25px；
位置：固定；
显示：块；
z指数：10；
背景：#333；
宽度：100%；
字体大小：14px；
排名：0；
字体系列：Calibri；
}
.导航{
宽度：100%；
高度：25px；
背景：#333；
保证金：0自动；
}
保险商实验室{
列表样式类型：无；
保证金：0；
排名：0；
宽度：100%；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：#111；
}
li.下拉列表{
显示：内联块；
}
.主动{
背景色：#4CAF50；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1；
}
.下拉：悬停.下拉内容{
显示：块；
}









您可以删除ul{overflow:hidden；}