Html 如何固定下拉菜单的块大小

我有一个图书馆的下拉菜单。每个库中可能有子对象（它们位于attribute.Internal元素中），也可能没有。当我将鼠标悬停在包含实例的库上时，它会在右侧显示另一个菜单。问题是，第一个菜单在发生这种情况时会改变大小，使其变得丑陋，而当我将鼠标悬停在最后一个库（没有实例）上时，它会同时改变大小并将菜单al阻塞在一起。 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:

/*下拉按钮*/
.dropbtn{
背景色：黑色；
颜色：白色；
填充物：5px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#ddd；}
/*悬停时显示下拉菜单*/
.dropdown:hover.dropdown内容{display:block；}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:hover.dropbtn{背景色：#3e8e41；}
/*右菜单容器*/
.对{
位置：相对位置；
显示：内联块；
}
/*第二菜单上的内容*/
.正确的内容{
显示：无；
位置：相对位置；
左：160像素；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*确保a的格式与以前的a类相同*/
.正确的内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*可悬停标签以显示第二个菜单*/
dropright先生{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*在鼠标右键显示第二个菜单*/
.右：悬停。右内容{
显示：块；
}

你好，老兄，你的下拉列表不能正常工作的原因是你在你的子分区中使用了

relative

，下面是代码，希望对你有好处

/*下拉按钮*/
.dropbtn{
背景色：黑色；
颜色：白色；
填充物：5px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#ddd；}
/*悬停时显示下拉菜单*/
.dropdown:hover.dropdown内容{display:block；}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:hover.dropbtn{背景色：#3e8e41；}
/*右菜单容器*/
.对{
位置：相对位置；
显示：内联块；
}
/*第二菜单上的内容*/
.正确的内容{
显示：无；
位置：绝对位置；
左：152px；
背景色：#f1f1；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
顶部：0；}
/*确保a的格式与以前的a类相同*/
.正确的内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*可悬停标签以显示第二个菜单*/
dropright先生{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*在鼠标右键显示第二个菜单*/
.右：悬停。右内容。右：焦点。右内容{
显示：块；
}

欢迎使用堆栈溢出！如果您点击Ctrl-M并将HTML和CSS复制到相应的面板中，您将获得可运行的代码版本，这将帮助每个人解决您的问题。您好，非常感谢，这真的很有帮助。只是一个简短的说明。右下角的宽度必须等于下拉内容的宽度。否则，它会留下一个“空白”空间，不考虑第二个菜单的一部分，当你把鼠标从第一移动到第二个菜单时，它会掉第二个菜单。@ GAGNAR现在运行上面的代码片段。它首先解决了你的进一步问题。我只是在你同意的答案旁边解决了你的空间问题，因为我解决了这个问题，谢谢兄弟。

/* 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;
}