受Safari中上层菜单限制的水平子菜单宽度
提问于 2014-09-23 00:54:52
我有一个带有二级项目列表的水平CSS菜单，其中一些列表相当长。除了Safari之外，所有的功能都可以在任何地方运行:它将二级菜单限制为顶级菜单的宽度。尝试增加顶层菜单的最小宽度，但不起作用，因为它的项目浮动在左边。我可以在顶层菜单上指定一个与margin-left:相结合的min-width:，但是我想知道是否有更干净的解决方案。
这是一个截图和相关的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 */
}
回答 1
Stack Overflow用户
发布于 2014-09-24 14:11:24
看似可行的试探性黑客选项(如果可能的话，我想避免这样做)：
a)让一些JS在Mac上的Safari (取自this answer)的情况下向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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25985249
复制相关文章
点击加载更多
腾讯云开发者
