Блог

У меня есть выпадающее меню библиотек. В каждой библиотеке могут быть вложенные в них подобъекты (они находятся в атрибуте . Внутренние элементы) или нет. Когда я навожу курсор на библиотеку с экземплярами, справа отображается другое меню. Проблема в том, что первое меню меняет размеры, когда это происходит, что делает его уродливым, и когда я навожу курсор на последнюю библиотеку (без экземпляров), она одновременно меняет размер и блокирует все меню вместе. Как выглядит 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><a href="#"(click)="addElement(librarie,librarie)">{{librarie.Name}}</a></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;
}
  

привет, приятель, причина, по которой ваш выпадающий список не работает должным образом, заключается в том, что вы используете relative в своем дочернем div вот код, надеюсь, он полезен для вас

 /* 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><a href="#" (click)="addElement(librarie,librarie)">{{librarie.Name}}</a></ng-template>
        </div>
      </div>
    </div>
    <button role="button" (click)="dropdown()" *ngIf="picture.InternalElements.length>=1"><span
        class="caret"></span></button>
  </div>
</div>
</div>