将子菜单放在最上面，并保持div的内容不移动和不移动

Question

I am following up on this question and answer: Sub-menu expanding parent div instead of displaying on top

If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?

For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/

Here is the code:

    <div id="menu">
        <ul>
            <li><a id="" class="" href="">Home</a></li>
            <li><a id="" class="" href="">About Me</a>
                <ul class="sub-menu">
                    <li><a href="">Biography</a></li>
                    <li><a href="">Photo Galery</a></li>
                    <li><a href="">Foot Print</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Expertise</a></li>
            <li><a id="" class="" href="">Projects</a>
                <ul class="sub-menu">
                    <li><a href="">Geo 228 Portal</a></li>
                    <li><a href="">NEP Application</a></li>
                    <li><a href="">Geo Address Book</a></li>
                    <li><a href="">Assets Management</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Contact</a></li>
        </ul>
    </div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>

css:

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px; 

}


#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}

#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}

#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
 }

#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}

#menu ul.sub-menu {
display: none;
position: relative;
}

#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}

#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}

#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}

  #menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
 #mytest {
 background-color: red;   
}

Ultimately, I have after something like the main menus you see at the top of accenture dot com.

Thanks!

Answer 1

Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;

as this css

#menu li {
    position:relative;
}

#menu ul.sub-menu {
display: none;
    position: absolute;
left: 0;
top: 100%;
}

Demo

Answer 2

#menu li {
    position:relative;
}

#menu ul.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

#mytest {
    float:left;
    background-color: red;
    width:100%;
    text-align: center;
}

DEMO