How to create menu of overlayed divs?

Question

How should I create menu like this?

It contains of multiple square divs with different colors. After hovering on one of them the div jumps about 20px to the right (the white square). Active page's square is whole visible at it's original place (not allways on the top), others are almost hidden and only the part of them are visible.

I tried to do it with position: absolute; for every square but I don't know how to move all the divs below the active one after clicking on it. Any other/better ideas?

EDIT: My HTML code:

<nav>
        <div class="nav_container">
            <li class="box1"><a n:href="Homepage:">Active</a></li>
            <li class="box2"><a n:href="Page:one">page1</a></li>
            <li class="box3"><a n:href="Page:two">Page2</a></li>
        </div>
    </nav>

My css code:

nav {
    float: left;
    width: 200px;
}

.nav_container {
    margin: 0px;
    width: 150px;
    height: 300px;
}

nav li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: center;
}

nav li:hover {
    margin-left: 20px;
    padding: 0;
}

.box1 {
    height: 150px;
    width: 150px;
    background-color:rgba(153, 153, 204, 0.75);
    position: absolute;
}

.box1 a {
    color: #fff;
}

.box2 {
    height: 150px;
    width: 150px;
    top: 350px;
    background-color:rgba(0, 0, 0, 0.75);
    position: absolute;
}

.box2 a {
    color: #fff;
}

.box3 {
    height: 150px;
    width: 150px;
    top: 400px;
    background-color:rgba(255, 255, 255, 0.75);
    position: absolute;
}

.box3 a {
    color: #000;
}

Answer 1

I made a basic demo of one way you could do it to get an idea and possibly develop further

it used this css

#nav{
    display:block;
}
#nav .right p{
    position:relative;
    top:115px;
    text-align:right;
    margin-right:5px;
}
#nav .nav1{
    background:blue;
    height:150px;
    width:150px;
    position:absolute;
    top:0px;
    z-index:3;
}
#nav .nav2{
    background:red;
    height:150px;
    width:150px;
    position:absolute;
    top:30px;
    z-index:2
}
#nav .nav3{
    background:yellow;
    height:150px;
    width:150px;
    position:absolute;
    top:60px;
    z-index:1;
}
.right{
    transition:0.5s ease;
}
.right:hover{
    margin-left:80px;
    transition:0.5s ease;
}

here is a JSFIDDLE of it