Html 引导4下拉菜单位于下面的div上方

我试图让引导4响应顶部导航出现在我的容器div没有运气，我似乎找不到一个解决方案

以下是顶级导航的工作原理

下面是我的JSFIDLE代码

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
} 

/*为顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#333；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景色：#4CAF50；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：可见；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：相对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：2；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*在topnav链接和悬停按钮上添加黑色背景*/
.topnav a:悬停，
.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
/*将灰色背景添加到悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*当用户将鼠标移动到下拉按钮上时，显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），
.下拉菜单{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.下拉列表{
浮动：无；
}
.topnav.responsive.下拉列表内容{
位置：相对位置；
}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}

设备
股票
报告
承包商

活动作业

挂起的作业

自年初至今已完成的作业
任何问题都让我知道。

首先，将.topnav类更改为：

.topnav {
    float:left;
    width:100%;
    position:relative;
    background-color: #333;
}

然后从.dropdown类中删除溢出。最后，在.dropdown内容类中更改position:relative to position:absolute

不要忘了在容器流体之前添加一个clear:both样式

---

这是问题。

您的代码是否与W3学校的代码相同？