Html
    Css
    Js
/*添加视觉样式*/
.multi_drop_menu {
	font:1em helvetica,arial,sans-serif;
}
.multi_drop_menu a {
	display:block;
	color:#555;
	background-color:#eee;
	padding:0.2em 1em;
	border-width:3px;
	border-color:transparent;
}
.multi_drop_menu a:hover {
	color:#fff;
	background-color:#aaa;
}
.multi_drop_menu a:active {
	background:#fff;
	color:#ccc;
}
/*添加功能样式*/
        .multi_drop_menu * {
	margin:0;
	padding:0;
}
/*强制 ul 包围 li*/
        .multi_drop_menu ul {
	float:left;
}
.multi_drop_menu li {
	/*水平排列菜单项*/float:left;
	/*去掉默认的项目符号*/list-style-type:none;
	/*为子菜单提供定位上下文*/position:relative;
}
.multi_drop_menu li a {
	/*给每个链接添加一个右边框*/border-right-style:solid;
	/*背景只出现在内边距区域后面*/background-clip:padding-box;
	/*去掉链接的下划线*/text-decoration:none;
}
.multi_drop_menu li:last-child a {
	border-right-style:none;
}
/* 添加的视觉样式 */
        /*二级菜单宽度*/
        .multi_drop_menu li ul {
	width:8em;
}
.multi_drop_menu li li a {
	/*去掉继承的右边框*/border-right-style:none;
	/*添加上边框*/border-top-style:solid;
}
/* 添加的功能样式 */
        .multi_drop_menu li ul {
	display:none;
	/*相对于父菜单项定位*/position:absolute;
	/*左边与父菜单项对齐*/left:0;
	/*顶边与父菜单项底边对齐*/top:100%;
}
.multi_drop_menu li li {
	/*停止浮动,恢复堆叠*/float:none;
}
.multi_drop_menu li li ul {
	/*继续隐藏三级下拉菜单*/display:none;
}
.multi_drop_menu li:hover > ul {
	/*父元素悬停时显示*/display:block;
}
.multi_drop_menu li li ul {
	/*相对于父菜单定位*/position:absolute;
	/*与父菜单右侧对齐*/left:100%;
	/*与父菜单项顶边对齐*/top:0;
}
/* 垂直列表 */
        .multi_drop_menu.vertical {
	width:8em;
}
.multi_drop_menu.vertical li a {
	border-right-style:none;
	border-top-style:solid;
}
.multi_drop_menu.vertical li li a {
	border-left-style:solid;
}
.multi_drop_menu.vertical ul,.multi_drop_menu.vertical li {
	/* 让顶级菜单垂直显示*/float:none;
}
.multi_drop_menu.vertical li ul {
	/*子菜单左边与上一级菜单右边对齐*/left:100%;
	/*子菜单顶边与上一级菜单项顶边对齐*/top:0;
}
.multi_drop_menu li:hover > a {
	/*悬停时的文本颜色*/color:#fff;
	/*悬停时的背景颜色*/background-color:#aaa
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.2.3
 立即下载

纯css 三级菜单

0