纯css制作三级菜单

<!DOCTYPE html>
<html>
<head>
    <title>三级菜单</title>
    <meta charset="utf-8" />
<style type="text/css">
/*添加视觉样式*/
.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}
</style>
</head>
<body>
    <nav class="multi_drop_menu vertical">
    <!-- 一级开始 -->
        <ul>
            <li><a href="#">首页</a>
                <!-- 二级开始 -->
                <ul>
                    <li><a href="#">第二</a>
                        <!-- 三级开始 -->
                        <ul>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                        </ul>
                        <!-- 三级结束 -->
                    </li>
                    <li><a href="#">第二</a>
                        <!-- 三级开始 -->
                        <ul>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                        </ul>
                        <!-- 三级结束 -->
                    </li>
                    <li><a href="#">第二</a>
                        <!-- 三级开始 -->
                        <ul>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第三</a></li>
                        </ul>
                        <!-- 三级结束 -->
                    </li>
                    <li><a href="#">第二</a></li>
                </ul>
                <!-- 二级结束 -->
            </li>
            <li><a href="#">第一</a></li>
            <li><a href="#">第一</a></li>
            <li><a href="#">第一</a></li>
        </ul>
        <!-- 一级结束 -->
    </nav>
</body>
</html>

 

posted @ 2017-03-10 10:43  chillylight  阅读(3104)  评论(0编辑  收藏  举报