效果截图（颜色有点丑，请无视）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; outline: 0; } ul, li { list-style: none; } a { text-decoration: none; } .nav { content: ''; display: table; clear: both; box-sizing: border-box; padding: 50px; } .nav li.list-li { position: relative; float: left; width: 120px; height: 40px; line-height: 40px; font-weight: bold; border: 1px solid #486b02; border-right: 0; background-color: #27AE60; text-align: center; box-sizing: border-box; } .nav>li.list-li:last-child { border-right: 1px solid #486B02; } .nav li.list-li ul { display: none; position: absolute; top: 39px; left: -1px; width: 120px; border: 1px solid #8BD400; border-top: 0px; border-right: 0; cursor: pointer; box-sizing: border-box; } .nav li.list-li ul.ul-last { border-right: 1px solid #8BD400; } .nav .list-li:hover ul { display: block; background-color: aquamarine; color: #fff; } .nav .list-li a { display: block; } .nav li a:hover { color: #fff; background-color: blue; } </style> </head> <body> <ul class="nav"> <li class="list-li"> <a href="javascript:;">home</a> <ul> <li> <a>desgin1</a> </li> <li> <a>desgin</a> </li> <li> <a>desgin</a> </li> </ul> </li> <li class="list-li"> <a href="javascript:;">home</a> <ul> <li> <a>desgin2</a> </li> <li> <a>desgin</a> </li> <li> <a>desgin</a> </li> </ul> </li> <li class="list-li"> <a href="javascript:;">home</a> <ul> <li> <a>desgin3</a> </li> <li> <a>desgin</a> </li> <li> <a>desgin</a> </li> </ul> </li> <li class="list-li"> <a href="javascript:;">home</a> <ul class="ul-last"> <li> <a>desgin4</a> </li> <li> <a>desgin</a> </li> <li> <a>desgin</a> </li> </ul> </li> </ul> </body> </html>