Question

I need a small help with this code. I am trying to create a menu.
I have demonstrated this in jsFiddle

My problem is that the button(which is not really a button) keeps moving as I hover over it, what method can be used to keep it where it is?

Here is some of my code

    <div id="start_bar">
        <div id ="start_button">
    Test

            <div id="nav">
            Hello World
            </div>

        </div>
    </div>

and css

    #start_button{
height:48px;
width:48px;
background-image:url('images/start.png');
color:white;
}
#start_button:hover  {
height:48px;
width:48px;
background-image:url('images/start.png');
margin-top: -18px;
}

#nav {
    display: none;
}
#start_button:hover > #nav {
display: block;
width: 70px;
height: 150px;
margin-top: -150px;
background-color: grey;
}

Answer 1

Instead of using margin-top: -Xpx; to move the menu into place, make it absolutely positioned left: 0; bottom: 100%;. This will work, and you don’t have to enter a pixel height for the menu or the menu bar.

Demo

In general, you want to avoid setting heights for elements. The height of an element should be dictated by the content as often as possible. Or, in this case, position: absolute; bottom: 100%; makes the element go upwards 100% the height of the relative coordinate system… position: absolute; also frees the element from the document flow. The menu is then free to grow “higher” as necessary.