水平子菜單寬度受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

，似乎工作（我想避免，如果可能的話）暫定黑客十歲上下的選項：

一）有一些JS在Mac上使用Safari時向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; 
}