<!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>
简单代码，粗糙
时间： 2024-12-28 20:47:34