内联块内的CSS绝对子级会导致布局错误。

Question

为了我的生命，我不知道为什么会这样.如果你在百叶窗上悬停，其他两个人为什么会掉下来，谁能明白为什么在这把小提琴里？

http://jsfiddle.net/vBR23/

jQuery(window).load(function(){
    jQuery('#topMenu li.has-children > a').each(function() {
        jQuery(this).parent().data('width', jQuery(this).innerWidth() + 14);
    });

    jQuery('#topMenu li.has-children').hover(function() {
        jQuery(this).css({ width: jQuery(this).data('width') + 'px' });
        jQuery(this).children('a').css({
            background: '#fff',
            left: '0',
            padding: '0 7px',
            position: 'absolute',
            top: '0',
            zIndex: '2'
        });
    }, function() {
        jQuery(this).css({ width: 'auto' });
        jQuery(this).children('a').css({
            background: 'transparent',
            left: 'auto',
            padding: '0',
            position: 'relative',
            top: 'auto',
            zIndex: '2'
        });
    });
});

我试着把它从它提取出来的项目中尽可能地拿回来，但是基本上，我所做的是在绝对和相对位置之间的内部'a‘，当你盘旋在李上面的时候。在我看来，李家应该互相配合，不管内容如何.它们都是相对于一定高度的位置。

似乎发生在FF，Chrome和Opera中。我还没试过呢。

谢谢。

Answer 1

将vertical-align:top添加到li标记。http://jsfiddle.net/vBR23/1/