title: div shifts to the right when drop down menu appears
body: <p>So I have an image inside a div that is centered in an outer-wrapper.  I have a horizontal menu at the top of the wrapper that displays 5 sub divs inline.  I have added css for a drop down menu that appears when you hover over the first of the 5 inline sub divs.  When the drop down menu appears, it causes the image to shift to the right and I can't for the life of me figure out how to correct it.  As you can see I have played around with z-index but i'm not sure if I understand what is happening or not happening with z-index and how it is used correctly. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
       &lt;div id="topmenu"&gt;
          &lt;div id="home"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
              &lt;ul&gt;
                   &lt;li&gt;item 1&lt;/li&gt;
                   &lt;li&gt;item 2&lt;/li&gt;
                   &lt;li&gt;item 3&lt;/li&gt;
              &lt;/ul&gt;   
          &lt;/div&gt;  
       &lt;/div&gt;
  
       &lt;div id="logo"&gt;
          &lt;img src="image.jpeg" /&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper{
      position:relative;
      width:960px;
      height:905px;
      margin-top:5px;
      margin-left:auto;
      margin-right:auto;
      /*text-align:left;
      border:2px solid red;*/
      background-color:#FFFFFF;
  }
  
  #topmenu{
      position:relative;
      border-bottom:2px solid #164207;
      height:30px;
      background-color:#ffffff;
      z-index:3;
  } 
  
  #logo{
      position:relative;
      border-bottom:2px solid #164207;
  }
  
  
  #logo img{
      position:relative;
      height:350px;
      width:500px;
      z-index:1;
  }
  
  #home{
      display:inline-block;
      float:left;
      margin-top:5px;
      margin-left:15px;
      width:169px;
      color:#164207;
      font-family:serif;
      font-weight:bold;
      font-size:20px;
      text-align:center;
      border-right:2px solid #164207;
  }
  
  #home:hover .sub-menu {display:inline-block;}
  
  .sub-menu {
      overflow:hidden;
      display: none;
      width: 169px;
      background-color: #164207;
      color:#FFFFFF;
      margin-top: 5px;
      border: 1px solid #fff;
      -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
  }
  
  .sub-menu li {
      position:relative;
      list-style-type: none;
      display: block;
      border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
      font-family:serif;
      font-size: 12px;
      height: 15px;
      padding: 8px 0;
  }
  </code></pre>