CSS menu with sub UL LI

Question

How can I fix my menu it is moving when I hover it? How can I fix it or overlay the submenu?

nav a:hover {
    border-left: 0;
    border-right: 0;
    border-top: 7px solid #04B404;
    text-decoration:none;
}

I thought text-decoration:none; is fixing the effect. I have my whole menu uploaded at jsfiddle.

http://jsfiddle.net/vicR/ScM8Y/

Answer 1

Change the following style to cater for 7px border on top and floating divs.

nav a:hover {
    border-left: 0;
    border-right: 0;
    border-top: 7px solid #04B404;
    text-decoration:none;
    margin-top:-7px; /* move 7px up */
}

nav ul li:hover > ul {
    display: block;
    border-top: 0px solid #04B404;
    text-decoration:none;
    position:absolute; /* don't shift others */
}

Answer 2

Instead of using a border-top, you could switch to using the "box-shadow" property:

Here's an example:

Obviously it isn't a best practice, but you can get the same effect if you don't want to start adding a bunch of corresponding margin-tops:

.border-top li:hover{ border-top: 10px solid red;}
.shadow-top li:hover{ box-shadow: 0 -10px 0 0 red;}

Answer 3

See the following updated fiddle: http://jsfiddle.net/ScM8Y/6/

Part of the problem is that the hidden content doesn't have a width (well, it isn't being counted at least), but your menu headers do. So when you hover over them the width of the now visible portions has a width that is being accounted for. This pushed the other menus left or right to accommodate the changes. To fix this you should give the menus an expected minimum with you think they must take up or give them all a standard width.

In the fiddle, I gave them all a width in your CSS.

nav ul li {
    width: 200px;
}

The up and down movements are from that big border you have appearing on top of the menus during the hover.