纯css3二级导航栏

**

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