<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3级菜单</title> <style> *{margin:0; padding:0;} ul li { list-style:none;} ul:first-child{width:900px; height:30px; background:#000; margin:0 auto;} ul:first-child>li{color:#fff; float:left; height:30px; line-height:30px; padding:0 20px; position:relative;} a{color:#fff; text-decoration:none; display:block; height:30px; line-height:30px; text-align:center;} ul:first-child>li:hover{ background:#ff0000;} ul:nth-child(2){ background:#4e4e4e; margin-left:-20px; display:none; position:absolute;} ul:nth-child(2)>li{ padding:0 20px;} ul:first-child>li:hover ul:nth-child(2){ display:block;} ul:first-child>li ul:nth-child(2)>li:hover{ background:#666;} ul:nth-child(2)>li { position:relative;} ul:nth-child(2)>li ul:nth-child(3){ position:absolute; background:#00f; right:-112px; display:none; top:0;} ul:nth-child(2)>li ul:nth-child(3)>li{ padding:0 20px;} ul:nth-child(2)>li:hover ul:nth-child(3){ display:block;} span { position:absolute; width:0; height:0;border:5px solid transparent; border-left-color:#000; top:10px; right:5px;} </style> </head> <body> <ul> <li> <a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a> <span></span> <ul> <li><a href="#">三级菜单1</a></li> <li><a href="#">三级菜单2</a></li> </ul> </li> <li><a href="#">二级菜单3</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> </ul> </body> </html>
简单代码，粗糙