纯html+css做的侧边三级菜单导航

最新推荐文章于 2024-07-31 17:45:09 发布

俊俏coder

最新推荐文章于 2024-07-31 17:45:09 发布

阅读量2.6k

点赞数 3

分类专栏：系统学习文章标签： html css

本文链接：https://blog.csdn.net/qwe123_asd/article/details/101071148

版权

系统学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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>

运行图片，有点丑，样式自己可以调
在这里插入图片描述