[HTML/CSS] Суть моей ошибки?

[хатабыч]

Не могу понять свою ошибку. Делаю элементарный список и вкладываю его в блок. далее задаю блоку менюшке relative; списку absolute; так как буду делать всплывающее меню. Понять не могу почему при этом все содержимое; блок со списком вываливается из общего контейнера. я хочу чтобы этот контейнер в бордере раздвигался при разворачивании меню.
html

body>
        <div id ="nav">
            <div class="top_menu">
             <ul class ="menu"><a href ="#">Menu</a>
                 <li><a href ="#">One</a></li>
                 <li><a href ="#">Two</a></li>
                 <li><a href ="#">Three</a></li>
             </ul> 
            </div>                 
        </div>
</body>

css

body{
    margin: 0;
    padding: 0;
}
#nav{
    width: 150px;
    background-color: #08c7ea;
    border: 3px solid green;
    margin: 20px;
    padding: 0px 10px;
}
.top_menu{
    margin: 5px 10px 5px 20px; 
    position: relative;

}
.menu a{
    text-decoration: none;
    color: #6f50d4;
    display: block;
    
}
.menu li a{
    color: crimson;
}

.menu{
    position: absolute;
    list-style:none;
}
.

[Naive]

position: absolute; вырывает блок из контекста: для всех окружающих его элементов он перестает существовать.