**
html
**
<ul class="tab1">
<li>
<a href="javascript:void(0);">UI</a>
<a href="javascript:void(0);">UI群</a>
</li>
<li>
<a href="javascript:void(0);">前端</a>
<a href="javascript:void(0);">前端群</a>
</li>
<li>
<a href="javascript:void(0);">java</a>
<a href="javascript:void(0);">java群</a>
</li>
<li>
<a href="javascript:void(0);">PHP</a>
<a href="javascript:void(0);">PHP群</a>
</li>
<li>
<a href="javascript:void(0);">python</a>
<a href="javascript:void(0);">python群</a>
</li>
</ul>
<ul class="top">
<li>
<a href="javascript:void(0);">UI</a>
<ul class="topChild">
<li>UI1</li>
<li>UI2</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">前端</a>
<ul class="topChild">
<li>前端1</li>
<li>前端2</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">java</a>
</li>
<li>
<a href="javascript:void(0);">PHP</a>
</li>
<li>
<a href="javascript:void(0);">python</a>
</li>
</ul>
**
css
**
* {
padding:0;
margin:0;
}
ul,li,ol {
list-style:none;
}
.tab1 {
width:500px;
height:50px;
margin:30px auto 0;
}
.tab1 li {
width:100px;
height:50px;
float:left;
position:relative;
transition:all 0.5s ease;
transform-style:preserve-3d;
}
.tab1 li a {
width:100px;
height:50px;
line-height:50px;
text-align:center;
display:block;
color:#fff;
text-decoration:none;
position:absolute;
top:0;
left:0;
}
.tab1 li a:nth-child(1) {
background:brown;
transform:translateZ(25px);
}
.tab1 li a:nth-child(2) {
background:darkkhaki;
transform:rotateX(90deg) translateZ(25px);
}
.tab1 li:hover {
transform:translateZ(0px) rotateX(-90deg);
}
.top {
width:600px;
height:50px;
background:#808000;
display:flex;
margin:15px auto 0;
}
.top>li {
width:120px;
height:50px;
text-align:center;
line-height:50px;
}
.top>li>a {
color:#fff;
font-size:18px;
text-decoration:none;
}
.topChild {
transition:all .5s;
transform:rotateX(-90deg);
transform-origin:left top;
opacity:0;
}
.topChild li {
width:100%;
background:rgba(0,233,40,0.5);
color:#fff;
cursor:pointer;
}
.top li:hover .topChild {
transform:rotateX(0deg);
opacity:1;
}
.topChild li:hover {
background:#A52A2A;
}