悬停时的宽度表现有趣吗？

Question

If you take a look at this page: http://wearewebstars.dk/frontend/Test/boerneunivers2.html Then clicking on ex: third link in the left navigation, then you will see that that link is now the current - Then if you hover over the fourth link, then the width in the third link changes? Cant figure out why? Any help will be greatly appreciated...

I've used jquery to the hover effekt, like this:

$(".left-navigation ul li:not(.current)").hover(function( e ){

     var mEnt = e.type=="mouseenter"; // boolean true/false

     $(this).stop().animate({width: mEnt?'100%':35}, mEnt?100:0, function() {
         $(this).find("span.nav-text").css({
             display: mEnt? "inline-block" : "none"
         });
     });

});

Answer 1

The width of the <li> becomes 100%. The width of the <ul> is dependent of the .left-navigation . Since that width isn't set, it as wide as the content. Because the <li> of the hover is bigger than the active one, the ul grows.

Simple fix:

.left-navigation {
    width: 200px
}

Answer 2

I can't tell you the exact problem, because I think your navigation should not work at all.

But your problem is with the % width of the li elements in the current/hover state.

The percent width has the meaning the given percentage of the parents width is used of the element. Because the ul is growing for certain elements in its width , the current element also growth in its width .

Why the hover works with percentage in the initial stage is not clear to me right now, I would need to look closer at it. But hopefully this information already helps you.