純html+css做的側邊三級菜單導航

html部分

<ul>
			<li>
		        <a href="#">章節</a>
		   	</li>
		   	<ul>
		        <li>
		            <a href="#">python</a>
		        </li>
		        <ul>
		            <li><a href="#">GUI</a></li>
		            <li><a href="#">SOCKET</a></li>
		            <li><a href="#">ASTNC</a></li>
		        </ul>
		        <li>
		            <a href="#">go</a>
		        </li>
		        <ul>
		            <li><a href="#">go1</a></li>
		            <li><a href="#">go2</a></li>
		            <li><a href="#">go3</a></li>
		        </ul>
		    </ul>
		    <li>
		        <a href="#">問答</a>
		    </li>
		    <ul>
		    	<li><a href="#">111</a></li>
		    	<ul>
		            <li><a href="#">1111</a></li>
		            <li><a href="#">1112</a></li>
		            <li><a href="#">1113</a></li>
		        </ul>
		    	<li><a href="#">222</a></li>
		    	<ul>
		            <li><a href="#">2221</a></li>
		            <li><a href="#">2222</a></li>
		            <li><a href="#">2223</a></li>
		        </ul>
		    </ul>
		    <li>
		        <a href="#">筆記</a>
		    </li>
		    <li>
		        <a href="#">提問</a>
		    </li>
		</ul>

css內容

<style>
			ul{
				list-style: none;
			}
			li{
				width: 200px;
				height: 40px;
				line-height: 40px;
				background: red;
				text-align: center;
				border:1px solid purple;		/*設置列表內容樣式*/
			}
			a{
				text-decoration: none;
			}
			ul ul{
				display: none;		/*隱藏二三級菜單*/
			}
			ul li:hover{
				background: yellow;
			}
			ul li:hover +ul{	/*僞類高級用法,顯示同級li挨着的第一個ul*/
				display: block;
			}
			ul ul:hover{	/*必須設置,不然僞類不生效*/
            	display: block;
        	}
		</style>

運行圖片，有點醜，樣式自己可以調