/*添加视觉样式*/
.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
}