html - 视口(viewport)缩小时出现水平滚动条

Question

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

这是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;
}

现在子菜单向右浮动(我希望我使用了正确的术语)。是否可以将子菜单 float 到其父菜单的左侧？？？

这是重现问题的 fiddle 。 https://jsfiddle.net/sk8m54g1/

如图所示，子菜单从其父菜单向右延伸。我想要的是，子菜单从其父级扩展到左侧。

Answer 1

改变左边的值。 -40 像素或 -35 像素。

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