在懸停問題上顯示div

Question

在這個小提琴中，當我將鼠標懸停在“動作”上時，將顯示一個下拉列表。

問題是，當我們看到最后一個項目位於滾動條下方且沒有看到時。 在.scrollable類中，我使用了position:relative;

.scrollable
{
    overflow: auto;
    height: 300px;
    position:relative;
    width:100px;    
}

子類“ drop”的position:absolute;

我不想更改position:relative對於.scrollable類的position:relative ，並且我希望.drop元素在懸停時會出現可滾動的內容，並且.drop不應顯示在滾動下方；

這是小提琴：提前http://jsfiddle.net/napper7/XPxsx/15/謝謝！！

Answer 1

這是一個工作代碼，我添加了一些js來獲取當前光標位置

$('.navItem').each(function() {
    $(this).hover(function(e) {
       $(this).find(".drops").css('left',e.pageX-20);   
       $(this).find(".drops").css('top',e.pageY);            

    }, function(e) {});
});​

http://jsfiddle.net/XPxsx/43/

Answer 2

    .scrollable
{      
    position:relative;
    height:300px;
    width:100px;    
}​

我認為您最好的選擇是放棄溢出行為。 據我所知，當它的溢出值不同於可見值時，不可能在其父級外部顯示嵌套的div。 其他任何值都會裁剪某種形式的外框內容（通過添加滾動條或完全隱藏內容）

我編輯了一個jsfiddle來實現您想要的功能，但是沒有滾動條： http : //jsfiddle.net/XPxsx/42/

這是有關溢出行為的一些文檔： http : //www.w3.org/TR/CSS21/visufx.html

除此之外，都將使用js在DOM明智的地方顯示內容。

另外，更普遍的看法是：最好使用sass（我猜是從css縮進中得出），但最好按含義順序排列選擇器，從最一般到最具體（例如html，然后是正文，然后是div。（在您的情況下為.scrollable，然后是.actionTools，然后是.navItem ..）

希望能有所幫助