Safari中上级菜单限制的水平子菜单宽度答案

【问题标题】：horizontal submenu width constrained by upper level menu in SafariSafari中上级菜单限制的水平子菜单宽度
【发布时间】：2014-09-24 22:11:24
【问题描述】：

我有一个带有二级项目列表的水平 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 */
}

【问题讨论】：

标签： css menu safari submenu

【解决方案1】：

似乎可行的临时 hack-ish 选项（如果可能，我想避免）：

a) 对于 Mac 上的 Safari，让一些 JS 向 html 元素添加一个类（取自 this answer）。

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

【讨论】：