<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } a { width: 200px; height: 50px; display: inline-block; background: red; line-height: 50px; text-align: center; color: #fff; } .parent { float: left; } .child { display: none; } .child a { background: green; } .parent:hover .child { display: block; } .child li a:hover { background: blue; } </style> </head> <body> <ul> <li class="parent"> <a href="#">首页</a> <ul class="child"> <li><a href="#">新闻</a></li> <li><a href="#">军事</a></li> <li><a href="#">财经</a></li> <li><a href="#">it</a></li> </ul> </li> </ul> </body></html>
鼠标放在按钮上显示下拉菜单
最新推荐文章于 2022-10-12 17:27:13 发布