Whenever I expand my dropdown, the items and existing controls seem to be getting mixed up. I am looking to completely hide background items and have the dropdown nested within another set of divs. Here is the code snippet:
dropdown.component.css
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
min-width: 18em;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent.active>span>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 18em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
dropdowncomponenet.html file
<ul #dropdown [ngClass]="isChild ? 'child' : ''">
<li class="parent" *ngFor="let item of items" (click)="open(item)" [ngClass]="item.isOpen ? 'active' : ''">
<a href="javascript:void(0);">{{item.name}}</a>
<span class="expand" *ngIf="item.children.length > 0"> ❯</span>
<span dropdown *ngIf="item.children.length > 0 && item.isOpen" [items]="item.children" isChild="true"></span>
</li>
</ul>
I cannot provide clear images at this time, but you can check out how the dropdown looks before and after expansion by clicking on the following links: https://i.sstatic.net/HyC6t.png https://i.sstatic.net/fq4pV.png