<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Title"/>
    <link rel="apple-touch-icon-precomposed" href="/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

<!--     <link rel="stylesheet" href="xxx.min.css">
    <link rel="stylesheet" href="/app.css">
 -->    
 	<style type="text/css">
 		* {margin: 0; padding: 0;}
        .nav{width: 600px; }
		.nav-tree, .nav-tree ul {list-style-type: none; margin-left: 30px;}
		.nav-tree li span{display: block; margin: 10px 0; border: 1px solid #ddd; padding: 10px;}
		.nav-tree li {position: relative;}
		.nav-tree li:before{content: ""; position: absolute; left: -20px; top: -10px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 20px; height: 15px;}
        .nav-tree li:after{content: ""; position: absolute; left: -20px; top: 5px; border-left: 1px solid #ddd; width: 1px; height: 100%;}
        .nav-tree li:last-child:after{display: none;}
        .nav-tree li span:hover, .nav-tree li span:hover + ul li span{border: 1px solid #888; background-color: #eee;}
        .nav-tree li span:hover + ul li:before, .nav-tree li span:hover + ul li:after{border-color: #888;}
 	</style>
</head>
<body>

    <div class="nav">
        <ul class="nav-tree">
            <li><span>Category 1</span></li>

            <li>
                <span>Category 2</span>
                <ul>
                    <li><span>Category 2-1</span></li>
                    <li><span>Category 2-2</span></li>
                    <li>
                        <span>Category 2-3</span>
                        <ul>
                            <li><span>Category 2-3-1</span></li>
                            <li><span>Category 2-3-2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

QQ图片20191225082645.png