Question

I have a pretty simple navigation element that I’ve made.

It looks fine in Chrome and Safari, but when I went to view it in Firefox I noticed that the hidden piece of the navigation “jumps” up when you roll over “About”. I am using a CSS reset.

The HTML:

<nav>
    <ul class="menu">
        <li>
            <a>About</a>
            <ul class="sub-menu">
                <li><a>People</a></li>
                <li><a>Approach</a></li>
            </ul>
        </li>
        <li><a>Projects</a></li>
        <li><a>Contact</a></li>
    </ul>
</nav>

​
The CSS:

nav li {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

.sub-menu {
    display: inline-block;
    white-space: nowrap;
}​

The JS:

$('.sub-menu').hide();

$('nav > ul > li').on({
    mouseenter: function() {
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    },
    mouseleave: function(){
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    }
});

The Fiddle: http://jsfiddle.net/HYPX8/

The Screenshot:

I have tried using just inline and the same thing occurs.

I tried using float: left on all of the li elements as well as .sub-menu but then I run in to an issue with the children li elements of .sub-menu collapsing on mouseleave

Can anyone recommend how to fix this issue? Thanks!

Answer 1

EDIT 0

If you comment out $('.sub-menu').hide(); and toggle the width you see that the issues lies with how JQuery is changing the CSS because it renders out correctly on load. I’d investigate that further.

Also, changing width to height produces something that you might want to use. See here: http://jsfiddle.net/HYPX8/5/.

$(this).find('.sub-menu').stop().animate({height: 'toggle'});

---

Solution Example: http://jsfiddle.net/HYPX8/2/.

Adding the following to the .sub-menu CSS seems to prevent that drop from occurring.

height: 10px;
margin-right: 16px;

It looks like if you really wanted to you could combine the CSS but it adds a little padding to the left.

nav li, .sub-menu {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

But, to get the desired result, all you need is the following.

.sub-menu {
    display: inline-block;
    height: 10px;
    margin-right: 16px;
    white-space: nowrap;
}