css实现多级菜单
实现原理 用ul和li 来展示多级菜单,当ul上有鼠标时,就展开该ul下的所有li标签, 当ul(包括其下面的li)没有鼠标时候,该ul就被隐藏
当然 多级菜单也可以用js来实现~~~
代码如下:存为 menu.html 即可查看效果
<!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=gb2312" />
<title>css实现的menu</title>
<style type="text/css">
.menu {
?? z-index:3;
?? font-size: 12px;
}
.menu ul {
?? padding: 0;
?? margin: 0;
?? list-style-type: none;
?? width: 100px;
?? position: relative;
}
.menu li {
?? background: #AFDD22;
?? height: 26px;
?? position: relative;
}
.menu li {
?? float: left;
?? margin-left: -16px;
?? margin-left: 0;
?? position: relative;
}
?
.menu a, .menu a:visited {
?? display: block;
?? text-decoration: none;
?? height: 25px;
?? line-height: 25px;
?? width: 100px;
?? text-indent: 5px;
?? border-bottom: 1px solid #fff;
}
.menu a:hover {
?? color: #fff;
?? background: #40DE5A;
}
.menu ul ul {
?? visibility: hidden;
?? position: absolute;
?? top: -1px;
?? left: 100px;
}
.menu ul li:hover ul, .menu ul a:hover ul {
?? visibility: visible;
}
.menu ul :hover ul ul {
?? visibility: hidden;
}
.menu ul :hover ul :hover ul {
?? visibility: visible;
}
</style>
</head>
<body>
<div src="/img/2012/10/18/1202521260.jpg">