<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>document</title> <style> * { padding: 0; margin: 0; } a { text-decoration: none; } ul li { float: left; position: relative; list-style: none; margin: 3px; } ul li a { width: 100px; display: block; text-align: center; padding: 10px 20px; background-color: #e8e8e8; } ul li ul { display: none; position: absolute; left: 0; top: 100%; } ul li:hover>ul { display: block; } ul li:hover>a { background-color: bisque; } ul li ul li { clear: both; position: relative; } ul li ul li a { width: 150px; border-top: 1px solid white; } ul li ul li ul { display: none; position: absolute; left: 100%; top: 0; } </style></head><body> <ul> <li> <a href="">11111111</a> </li> <li> <a href="">11111111</a> <ul> <li><a href="">2222</a></li> <li><a href="">222</a> <ul> <li><a href="">2222</a></li> <li><a href="">222</a> </ul> </li> </ul> </li> </ul></body></html>
