如何正确定位子菜单UL

Question

在我的菜单栏中，我有一个多级菜单。菜单是主菜单栏下的子菜单，即UL。

问题在于它的位置。如果我使用：

.dropdown-menu{
    position: absolute;
    left: 0;
}

将鼠标悬停在商店上，然后菜单如下所示：

鼠标悬停时显示菜单。因此，如果移动光标，它就会消失，看起来并不好。

如果我使用：

.dropdown-menu{
    position: absolute;
    left: auto;
}

将鼠标悬停在商店上，然后它看起来像这样：

在这种情况下，菜单不完全可见。

我可以使用right:0; css，但它会为左侧菜单创建相同的效果。

有没有办法让它向左或向右动态显示？

以下是示例CODE。