Javascript 响应导航栏下拉列表（非引导）

我有这个导航栏，它在原始模式下工作得很好，当屏幕宽度小于950px时，它会一个接一个地显示按钮，但问题是，下拉按钮也在那里，这是可以的，但它会在完全错误的一侧打开下拉内容。我希望使下拉内容显示在下拉按钮下。我的代码有问题吗？任何帮助都将不胜感激。我的代码：

$（函数（）{
var ulLi=$（'nav ul>li'）；
var fa=$（'nav ul>li:type a.fa'的最后一个）；
$（'nav ul'）。附加（''）；
$（'nav'）。每个（函数（）{
对于（var i=0；i li{
左侧填充：20px；
右边填充：20px；
填充：15px；
显示：内联块；
过渡：全部。3秒轻松；
左边距：-5px
}
导航ul>ol{
位置：绝对位置；
顶部：49px；
右：0；
背景：皇家蓝；
文本对齐：居中；
列表样式：无；
显示：无；
盒影：08px16px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
}
导航ul>ol>li{
宽度：100vw；
颜色：#FFF；
保证金：0；
填充：0；
填充顶部：10px；
垫底：10px；
过渡：全部。3秒轻松；
}
导航ul>ol>li:悬停a{
利润率：20px；
}
导航ul>ol>li:悬停{
颜色：#444；
光标：指针
}
#属性导航：悬停{
光标：指针；
}
导航ul输入{
不透明度：.7；
填充物：5px；
浮动：对；
显示：无
}
/*右起菜单*/
/*启动媒体查询*/
@媒体屏幕和屏幕（最大宽度：950px）{
nav ul>li:不是（：第一个孩子）{
显示：无；
}
nav ul>li：类型（2）的第n个最后一个{
显示：内联块；
}
nav ul>li：最后一种类型{
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：370px）{
nav ul>li：第一个孩子{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：270px）{
nav ul>li：最后一种类型{
显示：无；
}
}
@媒体屏幕和屏幕（最小宽度：950px）{
导航ul>ol>li{
显示：无
}
nav ul>li：类型（2）的第n个最后一个{
显示：无
}
}
.下载内容{
背景颜色：皇家蓝；
}

将
位置：相对
添加到父元素
#dropdownd
。然后将
位置：绝对
和
顶部：值
样式设置到子元素
。下拉内容


$（函数（）{
var ulLi=$（'nav ul>li'）；
var fa=$（'nav ul>li:type a.fa'的最后一个）；
$（'nav ul'）。附加（''）；
$（'nav'）。每个（函数（）{
对于（var i=0；i li{
左侧填充：20px；
右边填充：20px；
填充：15px；
显示：内联块；
过渡：全部。3秒轻松；
左边距：-5px
}
导航ul>ol{
位置：绝对位置；
顶部：49px；
右：0；
背景：皇家蓝；
文本对齐：居中；
列表样式：无；
显示：无；
盒影：08px16px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
}
导航ul>ol>li{
宽度：100vw；
颜色：#FFF；
保证金：0；
填充：0；
填充顶部：10px；
垫底：10px；
过渡：全部。3秒轻松；
}
导航ul>ol>li:悬停a{
利润率：20px；
}
导航ul>ol>li:悬停{
颜色：#444；
光标：指针
}
#属性导航：悬停{
光标：指针；
}
导航ul输入{
不透明度：.7；
填充物：5px；
浮动：对；
显示：无
}
/*右起菜单*/
/*启动媒体查询*/
@媒体屏幕和屏幕（最大宽度：950px）{
nav ul>li:不是（：第一个孩子）{
显示：无；
}
nav ul>li：类型（2）的第n个最后一个{
显示：内联块；
}
nav ul>li：最后一种类型{
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：370px）{
nav ul>li：第一个孩子{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：270px）{
nav ul>li：最后一种类型{
显示：无；
}
}
@媒体屏幕和屏幕（最小宽度：950px）{
导航ul>ol>li{
显示：无
}
nav ul>li：类型（2）的第n个最后一个{
显示：无
}
}
.下载内容{
背景颜色：皇家蓝；
}














添加位置：相对于
导航ul li
并将此css设置为下拉列表

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}


$（函数（）{
var ulLi=$（'nav ul>li'）；
var fa=$（'nav ul>li:type a.fa'的最后一个）；
$（'nav ul'）。附加（''）；
$（'nav'）。每个（函数（）{
对于（var i=0；i li{
左侧填充：20px；
右边填充：20px；
填充：15px；
显示：内联块；
过渡：全部。3秒轻松；
左边距：-5px
}
导航ul>ol{
位置：绝对位置；
顶部：49px；
右：0；
背景：皇家蓝；
文本对齐：居中；
列表样式：无；
显示：无；
盒影：08px16px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
}
导航ul>ol>li{
宽度：100vw；
颜色：#FFF；
保证金：0；
填充：0；
填充顶部：10px；
垫底：10px；
过渡：全部。3秒轻松；
}
.下拉列表内容{
宽度：100%；
} 
.下拉列表内容a{
文本对齐：居中；
}
导航ul>ol>li:悬停a{
利润率：20px；
}
导航ul>ol>li:悬停{
颜色：#444；
光标：指针
}
#属性导航：悬停{
光标：指针；
}
导航ul输入{
不透明度：.7；
填充物：5px；
浮动：对；
显示：无
}
/*右起菜单*/
/*启动媒体查询*/
@媒体屏幕和屏幕（最大宽度：950px）{
nav ul>li:不是（：第一个孩子）{
显示：无；
}
nav ul>li：类型（2）的第n个最后一个{
显示：内联块；
}
nav ul>li：最后一种类型{
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：370px）{
nav ul>li：第一个孩子{
显示：无；
}
}
@媒体屏幕和屏幕（最大宽度：270px）{