<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>炫酷下拉菜单</title>
<style>
.ulBox {
width: 500px;
margin: 0 auto;
}
.ulBox li {
float: left;
list-style: none;
background-color: green;
padding: 0 10px;
line-height: 40px;
color: #fff;
position: relative;
}
.ulBox li ul {
height: 0;
overflow: hidden;
position: absolute;
left: 0;
top: 40px;
padding: 0;
}
.ulBox li ul li {
background-color: red;
list-style: none;
float: none;
transition: all .3s;
-webkit-transition: all .3s;
opacity: 0;
}
.ulBox li ul li:nth-of-type(1n) {
transform: translate3d(100%,0,0);
-webkit-transform: translate3d(100%,0,0);
}
.ulBox li ul li:nth-of-type(2n) {
transform: translate3d(-100%,0,0);
-webkit-transform: translate3d(-100%,0,0);
}
.ulBox li:hover ul {
overflow: visible;
}
.ulBox li:hover ul li {
opacity: 1;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<nav>
<ul class="ulBox">
<li>HTMl5
<ul class="ulBox1">
<li>HTMl1</li>
<li>HTMl2</li>
<li>HTMl3</li>
<li>HTMl4</li>
</ul>
</li>
<li>CSS3
<ul class="ulBox1">
<li>CSS1</li>
<li>CSS2</li>
<li>CSS3</li>
<li>CSS4</li>
</ul>
</li>
<li>Javascript
<ul class="ulBox1">
<li>Javascript1</li>
<li>Javascript2</li>
<li>Javascript3</li>
<li>Javascript4</li>
</ul>
</li>
<li>Jquery
<ul class="ulBox1">
<li>Jquery1</li>
<li>Jquery2</li>
<li>Jquery3</li>
<li>Jquery4</li>
</ul>
</li>
<li>Vue
<ul class="ulBox1">
<li>Vue1</li>
<li>Vue2</li>
<li>Vue3</li>
<li>Vue4</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
