缩小视口时出现水平滚动条

Question

我有一个菜单，其子菜单会导致在减小视口时出现水平滚动条。

这是CSS

.main-menu ul li > .sub-menu{
    position: absolute;
    top: 100px;
    z-index: 99;
    width: 200px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
}

现在，子菜单向右浮动（我希望我使用了正确的术语）。可以将子菜单浮动到其父菜单的左侧吗？

这是解决问题的小提琴。 https://jsfiddle.net/sk8m54g1/

如您在图像中所见，子菜单从其父菜单向右扩展。我想要的是，子菜单从其父菜单向左扩展。

Answer 1

更改左值。 -40px或-35px。

.main-menu ul li > .sub-menu {
...
    left: -40px;
...
}