css绘制一个树形菜单效果代码-html代码-BFW代码库

css绘制一个树形菜单效果代码

代码语言：html

代码描述：css绘制一个树形菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        * {
            position: relative;
            margin: 0;
            padding: 0;

            border: 0 none;

            -webkit-transition: all .4s;
            transition: all .4s;
        }

        html,
        body {
            width: 100%;
            height: 100%;

            background: RGBA(0, 58, 97, 1);

            font-family: 'Fjalla One', sans-serif;
            font-size: 18px;
        }

        h1 {
            padding-top: 40px;

            color: #ccc;
            text-align: center;
            font-size: 1.5rem;

            text-shadow: rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 0 1px, rgba(0,0,0,0.6) 0 1px;
        }

        .nav {
            margin: 20px auto;
            left: 60px;
            width: 455px;
            min-height: auto;
        }

        ul.list,
        ul.list ul {
            margin: 0;
            padding: 0;
            list-style-type: none;

        }

        ul.list ul {
            position: relative;
            margin-left: 10px;
        }

        ul.list ul:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 0;

            border-left: 1px solid #ccc;
        }

        ul.list li {
            position: relative;
            margin: 0;
            padding: 3px 12px;

            color: #ccc;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 13px;
            font-weight: normal;
            line-height: 20px;
        }

        ul.list li a {
            position: relative;

            color: #ccc;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: bold;
            line-height: 20px;
        }

        ul.list li a:hover,
        ul.list li a:hover+ul li a {

            color: RGBA(213, 235, 227, 1);
        }

        ul.list ul li:before {
            content: "";
            display: block;
            position: absolute;
            top: 10px;
            left: 0;
            width: 8px;
            height: 0;

            border-top: 1px solid #ccc;
        }

        ul.list ul li:last-child:before {
            top: 10px;
            bottom: 0;
            height: auto;

            background: RGBA(0, 58, 97, 1);
        }
    </style>


</head>

<body translate="no">
    <h1>Parent child vertical list menu</h1>
    <nav class="nav">
        <ul class=list>
            <li>
                <a href="#">Home</a>
                .........完整代码请登录后点击上方下载按钮下载查看