div shifts to the right when drop down menu appears

Question

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.

HTML:

<div class="wrapper">
     <div id="topmenu">
        <div id="home"><a href="index.html">Home</a>
            <ul>
                 <li>item 1</li>
                 <li>item 2</li>
                 <li>item 3</li>
            </ul>   
        </div>  
     </div>

     <div id="logo">
        <img src="image.jpeg" />
     </div>
</div>

CSS

.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;
}

Answer 1

You need to add position: absolute; to .sub-menu to create a stacking context.

jsFiddle

#home{
    display:block;
    float:left;
    margin-top:5px;
    width:184px;
    color:#164207;
    font-family:serif;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    border-right:2px solid #164207;
}

#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}

    .sub-menu {
        overflow:hidden;
        display: none;
        width: 182px;
        background-color: #164207;
        color:#FFFFFF;
        /*padding: 10px 10px;
        margin-left: 0px;*/
        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);
        position:absolute;    /**************************** Important Bit*/
        top:24px;
    }

To re-adjust alignment- Remove margin-left:15px; from #home, #course, #leagues, #events, and #about and adjust widths on all of them. Then adjust the width of .sub-menu. See updated jsFiddle above for details and working model.

Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.