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