使用html（css）实现垂直导航_弹性垂直导航栏html-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44614751/article/details/102653968

本文介绍了如何使用HTML和CSS创建垂直导航，包括代码实现和最终效果图展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现垂直导航
效果图：
在这里插入图片描述
代码：
这直接把CSS文件包含到style这个标签里。如果需要的话，可以自己抽离出来，很容易实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wp</title>
		<link type="text/css" rel="stylesheet" href="#">  /* css文件的路径 */
		<style>
			*{
				margin: 0;
				padding: 0;	
			}
				
			body{
				font-family:sans-serif,"arial rounded mt bold";
				font-size: 14px;
				line-height: 1.4em;
				min-width:600px;
			}
			.adminMenuWrap{
				position: relative;
				float: left;
				width: 160px;
				background-color: #222222;
			}
				
			.adminmenu{
				clear: left;
				margin: 12px 0;
				list-style: none;
				width: 160px;
				background-color: #222;
			}
				
			.menu{
				min-height: 34px;
				cursor: pointer;
			}
			.menu a{
				padding: 10px 0;
				display: block;
				color: white;
				text-decoration: none;
				text-indent: 40px;
			}
			a:hover{
				background: #000;
				color: cyan;
			}
		</style>
	</head>
	<body>
		<div class="adminMenuWrap">
			<ul class="adminmenu">
				<li class="menu"> <a href="#">文章</a></li>
				<li class="menu"> <a href="#">多媒体</a></li>
				<li class="menu"> <a href="#">页面</a></li>
				<li class="menu"> <a href="#">评论</a></li>
				<li class="menu"> <a href="#">外观</a></li>
				<li class="menu"> <a href="#">插件</a></li>
				<li class="menu"> <a href="#">用户</a></li>
				<li class="menu"> <a href="#">测试</a></li>
			</ul>
		</div>
	</body>
</html>