水平子菜单宽度受Safari中上级菜单的约束

Question

我有一个带有二级项目列表的水平CSS菜单，其中一些非常冗长。除Safari外，所有工作都在其中：它限制了二级菜单，其宽度为顶级菜单。在顶级菜单上尝试增加最小宽度不起作用，因为它的项目向左浮动。我可以在顶级菜单上指定min-width:与margin-left:相结合，但想知道是否有更清晰的解决方案。

这是截图和相关的CSS：

ul {
    display: block;
    float: right;
    margin: 0;
    position: relative;
}
ul > li {
    float: left;
    position: static;
}
ul > li > ul {
    display: none; /* toggled to flex on mouseover of top level menu item */
    float: left;
    left: auto;
    min-width: 32em;
    padding: 0.9em 0 0.7em;
    position: absolute;
    right: 0;
    top: 92px;
    visibility: hidden; /* toggled to visible on mouseover of top level menu item */
}

Answer 1

试探性的hack-ish选项似乎有效（如果可能，我想避免使用）：

a）如果是Mac上的Safari（取自this answer），请让一些JS为html元素添加一个类。

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    $('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
}

b）根据要求，将菜单定位为min-width和padding-left，这会使其更长并将其推到右侧。

.safari-mac ul {
    min-width: 50em;
    padding-left: 20em;
}