在悬停问题上显示div

Question

In this fiddle you will fill when i hover on "action" a dropdown is showed.

The problem is when we see the last item it goes below the scroll and it is not seen. in .scrollable class i have used the position:relative;

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

and the child class "drop" has the position:absolute;

i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;

here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/ THanks in advance!!

Answer 1

here is a working code,i added a bit of js to get the current cursor position

$('.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;    
}​

I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)

I edited a jsfiddle that does what you want but without a scrollbar : http://jsfiddle.net/XPxsx/42/

And here is some documentation on overflow behavior : http://www.w3.org/TR/CSS21/visufx.html

Anything out of this, will be using js to display the content in a different place DOM wise.

Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)

hope that helps