CSS鼠标滑过显示二级目录效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS鼠标滑过显示二级目录效果</title> <style> .ermulu{ display:none; position:absolute; width:200px; height:50px; background:rgba(0,0,0,0.2); border-radius:10px; border:2px solid #000; } ul{ display:flex; } li:first-child{ width:200px; background:red; list-style:none; padding:20px 20px; } li:nth-child(2){ width:200px; background:black; color:white; } ul li:hover .ermulu{ display:block; } </style> </head> <body> <ul> <li>5555 <div> <ul> <li>44444</li> <li>44444</li> <li>44444</li> </ul> </div> </li> <li>55555 <div>bbbbb</div> </li> </ul> </body> </html>
Statement: If the content on this site infringes upon the legitimate rights and interests of the original author, please contact this site to delete it.