title: Moving div using hover
body: <p>I need a small help with this code. I am trying to create a menu.
  I have demonstrated this in <a href="http://jsfiddle.net/qkGR4/" rel="nofollow">jsFiddle</a></p>
  
  <p>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?</p>
  
  <p>Here is some of my code</p>
  
  <pre><code>    &lt;div id="start_bar"&gt;
          &lt;div id ="start_button"&gt;
      Test
  
              &lt;div id="nav"&gt;
              Hello World
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>    #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 &gt; #nav {
  display: block;
  width: 70px;
  height: 150px;
  margin-top: -150px;
  background-color: grey;
  }
  </code></pre>