How to fixed block size of a dropdown-Menu - html

Question

I have a dropdown menu of libraries. Each library may have sub-objects into them (they are in the attribute . Internal Elements) or not. When i hover over a library with instances it shows another menu to the right. The problem is that the first menu is changing sizes when this happens making it ugly and when i hover over the last library (without instances) it changes size at the same time and blocks the menu al together.
How it looks
The HTML:
<div class="row">
<div class="col-md-11">
<a href="#"
class="list-group-item clearfix"
(click)="onSelected()">
<div class="pull-left">
<h4 class="list-group-item-heading">{{picture.Name}}</h4>
</div>
</a>
<div *ngIf="dropdownflag">
<app-xml-element *ngFor="let component of components" [component]="component"></app-xml-element>
</div>
</div>
<div class="col-md-1.5">
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-plus"></span></button>
<div class="dropdown-content">
<div *ngFor="let librarie of libraries">
<div *ngIf="librarie.InternalElements.length>=1; else empty">
<div class="right">
<a class="dropright" >{{librarie.Name}}</a>
<div class="right-content">
<div *ngFor="let instance of librarie.InternalElements">
<a (click)="addElement(librarie,instance)">{{instance.Name}}</a>
</div>
</div>
</div>
</div>
<ng-template #empty>{{librarie.Name}}</ng-template>
</div>
</div>
</div>
<button role="button" (click)="dropdown()" *ngIf="picture.InternalElements.length>=1"><span class="caret"></span></button>
</div>
</div>
CSS:
/* Dropdown Button */
.dropbtn {
background-color: black;
color: white;
padding:5px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/*Right menu container*/
.right {
position: relative;
display: inline-block;
}
/* content on 2nd menu*/
.right-content {
display: none;
position: relative;
left:160px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*ensure that a has the same format as previous class a*/
.right-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*hoverable a tag to show 2nd menu*/
.dropright {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the 2nd menu on hover right */
.right:hover .right-content {
display: block;
}

Answer 1

hello buddy the reason behind your dropdown not working properly is because you are using relative in your child div here is the code hopefully its good for you
/* Dropdown Button */
.dropbtn {
background-color: black;
color: white;
padding:5px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/*Right menu container*/
.right {
position: relative;
display: inline-block;
}
/* content on 2nd menu*/
.right-content {
display: none;
position: absolute;
left: 152px;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 0;}
/*ensure that a has the same format as previous class a*/
.right-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*hoverable a tag to show 2nd menu*/
.dropright {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the 2nd menu on hover right */
.right:hover .right-content,.right:focus .right-content{
display: block;
}
<div class="container">
<div class="row">
<div class="col-md-11">
<a href="#" class="list-group-item clearfix" (click)="onSelected()">
<div class="pull-left">
<h4 class="list-group-item-heading">{{picture.Name}}</h4>
</div>
</a>
<div *ngIf="dropdownflag">
<app-xml-element *ngFor="let component of components" [component]="component"></app-xml-element>
</div>
</div>
<div class="col-md-1.5">
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-plus"></span></button>
<div class="dropdown-content">
<div *ngFor="let librarie of libraries">
<div *ngIf="librarie.InternalElements.length>=1; else empty">
<div class="right">
<a class="dropright">{{librarie.Name}}</a>
<div class="right-content">
<div *ngFor="let instance of librarie.InternalElements">
<a (click)="addElement(librarie,instance)">{{instance.Name}}</a>
</div>
</div>
</div>
</div>
<ng-template #empty>{{librarie.Name}}</ng-template>
</div>
</div>
</div>
<button role="button" (click)="dropdown()" *ngIf="picture.InternalElements.length>=1"><span
class="caret"></span></button>
</div>
</div>
</div>