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