Scrolllable div與css翻轉=溢出問題

Question

我正在使用一個滾動div內的項目列表的接口，其中一些使用延伸到div外的懸停的翻轉菜單。禁用的腳本兼容性是該網站的優先事項，所以我試圖在我開始進入其他折衷方案之前查看是否只使用CSS完成接口。

我在下面有一些例子。有問題的菜單位於標題'選擇項目'的右側。每個頁面頂部的第三個列表項目包含一個翻轉菜單。

爲了在滾動位置發生變化時保持翻轉相對於父母的位置，我定位了父親的親戚和孩子的ul的絕對位置。
EXAMPLE 1

當然，一旦溢出：汽車是和到位的滾動，翻車從顯示切斷。 EXAMPLE 2

我試着去掉父李的相對位置，並保留翻轉的絕對位置以將它們從div中釋放，但是當滾動位置改變時它們不能正確定位。 我只能發佈兩個鏈接，但如果你想要一個插圖，它是在這裏：eypaedesign.com/markets-rollover-issue-no-relative.htm

除了更改用戶界面，是否有一組屬性我在這裏沒有看到可以用來使這個接口在CSS上工作嗎？我可以將整個div定位爲絕對值，併爲翻轉出現在左邊的大量填充，但看起來很不雅觀。

感謝鄉親 -

Answer 1

如果你把293px，高度在你的類的資產淨值就應該沒問題。 或者在你的project_menu ID，正如我所看到的ID的高度爲218px，你的UL爲293px。

通過改變其中之一你應該沒問題。這取決於你如何設置它影響其他元素。

但是使用project_menu ID應該不錯。

Answer 2

只有CSS，你僅限於其中一個：overflow: auto或溢出的懸停菜單。使用單獨的visible和auto屬性overflow-x和overflow-y不起作用，所以我認爲你最好的選擇是使用你正在考慮的填充解決方案。

適當的使用絕對定位和z-index（如果您擔心填充菜單容器命中阻斷填充下的任何元素），你應該能夠做到這一點，而不破壞你的佈局的其餘部分。當然，您必須控制可滾動容器內所有子元素的大小，以便它們不會擴展到其填充父級的全部寬度。

添加這些特性 - 沒有其他改變 - 似乎在您的網站工作，所以也許你可以逃脫它很容易：

#project_menu { 
    padding-left: 300px; 
    margin-left: -300px; 
} 

.center { 
    position: relative; 
    z-index; 10; 
}