如何创建覆盖div的菜单？

Question

我应该如何创建这样的菜单？

它包含多个正方形的div用不同的颜色的。在其中一个盘旋之后，div向右跳跃约20px（白色方块）。活动页面的正方形在原始位置完全可见（不是全部位于顶部），其他位置几乎隐藏，只有部分可见。

我试图用position: absolute;为每个方块做到这一点，但我不知道如何在点击它之后将所有的div移动到活动的下方。任何其他/更好的想法？

编辑： 我的HTML代码：

<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> 

我的CSS代码：

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

我做的一种方式的基本演示，你可以这样做是为了得到一个想法，并可能发展进一步

它使用本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; 
} 

这里是它的一个JSFIDDLE