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