如何在Angular 12中使用bootstrap 5创建多级下拉菜单?

Question

我想在angular 12中使用Bootstrap 5创建一个多级下拉菜单。我想知道一个人将如何去创造它?

这里有一个例子

谢谢!

Answer 1

下面是一个基本的例子

html

<div class="container">        
<ul class="">
<li class="">
<a tabindex="-1" href="#">Item 1</a>
<ul class="">
<li class=""><a tabindex="-1"                                        href="#">Item 1 A</a></li>
<li class=""><a href="#">Item 1 B</a></li>
<li class=""><a href="#">Item 1 C</a></li>
<li class="">
<a href="#">Item 1 D </a>
<ul class="parent">
<li >
<a href="#">
Item 1 D1
</a>
<li ><a href="#"> Item 1 D2</a></li>
<li ><a href="#"> Item 1 D3</a></li>
</ul>
</li>
<li class=""><a href="#">Implementation</a></li>
<li class=""><a href="#">Review</a></li>
<li class=""><a href="#">Execution Only</a></li>
</ul>
</li>
<li ><a href="#">Item 2</a></li>
<li ><a href="#">Item 3</a></li>
<li ><a href="#">Item 4</a></li>
</ul>

</div>

css

html, body {
margin:0;
padding:0;
height:100%;
}
* {box-sizing: border-box;}
.container {
height:100%;
}
a {
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
padding:0px 0px 20px 0px;
width:100%;
display:block;
height:100%;
}
li {
padding:20px 20px 0 20px;
width:100%;
color:#fff;
}
.container ul {height:100%;}
.container > ul {
width:250px;
background-color:#224490;
position:relative;
overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#18316a;
}
.container > ul > li:hover > ul {
display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
padding:20px;
}

您可以在代码窗格

中查看工作演示。