Javascript 如何将下拉内容放置到悬停时左侧导航的右侧

所以我有一个左边的导航栏，在悬停时打开，里面有一个按钮，在悬停时也有下拉内容。但现在，下拉内容出现在按钮下方（在左导航内）。我希望下拉内容出现在按钮旁边，在左导航的右侧（因此在左导航之外）

有什么想法吗

筛选

/*侧边导航菜单*/
.侧导航{
身高：70%；
宽度：55px；
位置：固定；
z指数：0；
顶部：200px；
左：0px；
右：50px；
背景色：#ff0000；
溢出x：隐藏；
填充顶部：0px；
过渡：0.5s；
}
/*悬停*/
.sidenav:悬停{
宽度：250px；
}
.sidenav normalb:悬停{
背景色：#4F0909；
}
.按钮组{
对齐内容：基线；
}
/*鼠标悬停时背景颜色较深*/
.btn:悬停{
背景色：#4F0909；
}
.sidenav h1{
背景色：#850101；/*蓝色背景*/
边框：精简；/*删除边框*/
颜色：白色；/*白色文本*/
字体大小：16px；/*设置字体大小*/
光标：指针；/*鼠标指针悬停*/
溢出：隐藏；
}
.sidenav h1：悬停{
背景色：#4F0909；
}
/*导航菜单链接*/
.侧导航a{
左侧填充：10px；
文字装饰：无；
字号：18px；
颜色：#f1f1；
显示：块；
过渡：0.3s
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
#主要{
过渡：左边距。5s；
填充：20px；
}

。下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#640303；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#D90909；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#D60707；
}

如果您确定左侧导航栏的宽度，则可以设置

下拉列表内容的
left
属性。由于
下拉列表内容
是
绝对值
，设置左值将使下拉列表向右移动


。下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#640303；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
排名：0；
左：144px；
/*这里我设置了下拉内容的宽度（减去填充）*/
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#D90909；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#D60707；
}

筛选
编辑left:属性后，部分下拉内容就会消失在sidenav中。我需要它显示在侧导航的右侧（外侧）。请尝试将
top:0
也设置为
。下拉内容
。检查更新的答案。我现在就尝试了，但它仍然显示在侧导航中。你检查了我附加的代码片段了吗？这是您期望的行为吗？明白了，只需将溢出更改为导航可见即可。谢谢