Html 如何正确定位子菜单UL

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

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

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

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

菜单显示在鼠标上方。因此，如果光标被移动，它就会消失，看起来不太好

如果我使用：

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

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

将鼠标悬停在Shop上，然后显示如下：

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

我可以使用

右键：0css，但它将为左侧菜单创建相同的效果

有没有办法让它动态地向左或向右可见

这是示例。
您可以为此添加代码或演示，然后我们可以帮助您。@jainam我刚才在问题中添加了。代码笔链接。