你的需求是这样么？你只要控制一下父级和子级的包含关系就可以实现了：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
hr{margin: 10px 0 10px 0 }
li {
list-style: none
}
.nav {
height: 35px
position: relative
}
.bar{
position: absolute
right: 0
}
.bar ul li {
float: left
background: #3695D5
width: 50px
height: 35px
line-height: 35px
text-align: center
}
.box{border: 1px solid #000000}
</style>
<body>
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="box">
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
<hr>
<div class="box">
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
</body>
</html>
像这种需求你可以用js或者jQuery编写。
如果不想使用js或者jquery，那么用css的过渡属性代码如下：
鼠标滑入，出现效果
transition: right .7s ease
right为过渡的属性，可以是宽高，top/lelft/right/bottom/opacity等等。只要记住transition不能过渡display就行。
.7s 为过渡所需要的时间，ease为过渡的样式，是匀速过渡还是先快后慢等等。
如果没有鼠标事件，那么就需要用到css3的动画，animation。css3的动画详情卡查看https://mengkedu.com/
