Html 引导4侧边栏菜单下拉列表

我需要创建一个Bootstrap4侧边栏菜单下拉列表，如下图所示

我正在考虑使用Dropright按钮，我正在寻找代码的好例子，但没有成功

---

谁能给我一个起点？或者像这样的菜单的功能示例，带引导？

带下拉菜单的引导4侧菜单栏： 以整页模式运行并签出此文件

html，正文{
保证金：0；
填充：0；
身高：100%；
}
*{框大小：边框框；}
.集装箱{
身高：100%！重要；
边距：0！重要；
填充：0！重要；
}
a{
颜色：#fff！重要；
文字装饰：无！重要；
边框底部：1px点#fff；
填充：0px 0px 20px 0px；
宽度：100%；
显示：块；
身高：100%；
}
李{
填充：20px 20px 0 20px；
宽度：100%；
列表样式类型：无；
颜色：#fff；
}
.ul容器{高度：100%；}
.container>ul{
宽度：250px；
背景色：#225fe8；
位置：相对位置；
填充：0！重要；
溢出：可见；
}
.container>ul>li{}
.container>ul>li:悬停{背景色：#0f1e41；}
.container>ul>li>ul{
显示：无；
位置：绝对位置；
右：-250px；
排名：0；
填充：0！重要；
宽度：250px；
背景色：#193d8e；
}
a:悬停{
颜色：#fbfb！重要；
}
我{
利润上限：4倍；
左侧填充：8px；
}
.container>ul>li：悬停>ul{
显示：块；
}
.container>ul>li>ul>li:hover{背景色：#0f1e41；}
.container>ul>li>ul>li>ul{
显示：无；
位置：绝对位置；
右：-250px；
填充：0！重要；
排名：0；
宽度：250px；
背景色：#112551；
}
.container>ul>li>ul>li：悬停ul{
显示：块；
}
.container>ul>li>ul>li:hover{背景色：#0f1e41；}
.container>ul>li>ul>li{
边框底部：1px点#fff；
填充：20px；
}

平台
基金
财富
已列出
财富
已列出
已列出













$（'.child'）.hide（）；
$（'.parent'）.children（）。单击（函数（）{
event.preventDefault（）；
$（this）.children（'.child'）.slideToggle（'slow'）；
$（this.find（'span'）.toggle（）；
});

下面是我为接近发布的图片所做的一些调整

谢谢@Amaresh S M

垃圾桶：

• 从html中删除了tabindex-1

• 从css中删除i标记

• 删除了jquery脚本中的

要获得包含4个部分（3个动态部分和1个固定部分）的菜单：

• 容器从.container更改为.container流体， 全宽

• 原始容器更改为col-9（宽度的75%）

• css中的所有.container都更改为col-9

• 在右侧添加了一个固定的col-3（菜单的静态部分，宽度的25%）

• col-9的三个部分各有33.33%的宽度

• 唯一的.row具有100%的高度

重要提示：

• 我为col-9和col-3列创建了类。将CSS与泛型类关联不是一个好主意！这可能会影响整个网站

。行菜单全宽{
身高：100%；
}
.动态部分{
边距：0！重要；
填充：0！重要；
背景色：黑色；
浮动：左；
}
a{
颜色：#fff！重要；
文字装饰：无！重要；
边框底部：1px点#fff；
填充：0px 0px 0px 0px；
宽度：100%；
显示：块；
}
李{
列表样式类型：无；
颜色：#fff；
左侧填充：30px；
}
.动态部分>ul{
宽度：33.33%；
身高：100%；
背景色：#225fe8；
位置：相对位置；
填充：0！重要；
溢出：可见；
}
.dynamic part>ul>li:悬停{背景色：#0f1e41；}
.动态部分>ul>li>ul{
显示：无；
位置：绝对位置；
右图：-100%；
排名：0；
填充：0！重要；
宽度：100%；
背景色：#193d8e；
身高：100%；
}
a:悬停{
颜色：#fbfb！重要；
}
.动态部分>ul>li：悬停>ul{
显示：块；
}
.dynamic part>ul>li>ul>li:hover{背景色：#0f1e41；}
.动态部分>ul>li>ul>li>ul{
显示：无；
位置：绝对位置；
右图：-100%；
填充：0！重要；
排名：0；
宽度：100%；
背景色：#112551；
身高：100%
}
.动态部分>ul>li>ul>li:悬停ul{
显示：块；
}
.dynamic part>ul>li>ul>li>ul>li:hover{背景色：#0f1e41；}
.动态部分>ul>li>ul>li{
博尔德