0

For the life of me I can't figure out why this is happening... Can anybody see why in this jsfiddle if you hover over the blinds item, the other two drop down?

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'
        });
    });
});

I've tried to strip this back as far as I can from the project it's extracted from, but basically what I'm doing is swtiching the inner 'a' between absolute and relative positioning as you hover over the li. It seems to me that the li's should render alongside each other regardless of their content... They're all position relative with a defined height.

Seems to happen in FF, Chrome and Opera. I've not yet tried IE.

Thanks.

1 Answer 1

1

Add vertical-align:top to li tag. http://jsfiddle.net/vBR23/1/

1
  • Ohhh, Lado you're a genius! Worked a treat, thanks. I've been staring at this thing for hours :-(
    – Ric
    Jul 24, 2014 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.