JQuery/CSS - Need help debugging animated content

Question

I'm having a bit of trouble with an experimental layout, and I need a fresh pair of eyes to take a look at my code and help me figure out what I am doing wrong.

I've got a site: http://digitaldesignery.com/new2/

When you hover over the menu items, a jquery script changes the height of the item (a modified version of a script I found elsewhere of stackoverflow):

jQuery(function( $ ){
$(".navitem").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height + 25});
}, function() {
    $(this).stop().animate({ height: $.data(this,'size').height});
});

});

The problem is that the content below it moves as well and I don't want it to. I understand why it moves, but after trying a wide variety of positioning styles, I just can't figure out how to get it to stay put.

I am using the 1140 css gridstyle and am not really able to change the core structure of my HTML.

My custom css is at the top of style.css

Thanks!

Answer 1

In your style.css add height to your #nav

#nav {
float: right;
height: 150px;
}

Answer 2

You have the a padding of 25 px and the maximum height on hover is 125px. So if you set the height of either nav, or row to 150px you should be fine. This however displaces the text you have downwards.

You should change

.row-content{
    padding-top:5 em;
}

to something lower if you don't want it to be displaced.