css - 如何根据框的大小调整下拉菜单的位置（CSS3家族树）

Question

我有 css3 家族树，当您单击该框时，会出现一个下拉菜单。

问题 1

我试图让它总是出现在右边，transform: translate3d(90px, 0px, 0px) !important;但值90必须根据盒子的大小而变化。

我怎样才能做到这一点 ？

问题2

如果用户点击部门 4，菜单会创建一个溢出 x。

如何在不溢出的情况下显示菜单？

代码示例

谢谢。

Answer 1

对于第一个问题，您可以重置然后left再次使用：righttransform: translate3d()

.tree div.dropdown-menu {
    border: none;
    background-color: transparent;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    left: unset !important;
    right: -60px;
    transform: translate3d(0, 0, 0) !important;
}

不确定我是否正确，但对于第二个问题，添加overflow: unset到.tree ul.

.tree ul {
  overflow-x: unset !important;
}

我通常不表示使用!Important，但在这种情况下，有必要覆盖属性。