纯css实现垂直导航栏

最新推荐文章于 2022-07-21 11:15:02 发布

wangjun5159

最新推荐文章于 2022-07-21 11:15:02 发布

阅读量1.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wangjun5159/article/details/50732230

版权

css 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

ul.nav{
	margin:0;
	padding:0;
	width: 8em;
	list-style-type: none;
	background-color: #8BD400;
	border:1px solid #486B02;
	font-size: 2em;
}
/*去掉最后一个li中a的border-bottom*/
ul.nav li:last-child a{
	border-bottom: 0;
} 
/*去掉第一个li中a的border-top*/
ul.nav li:first-child a{
	border-top: 0;
}


ul.nav a{
	display: block;
	line-height: 40px;
	color:#2B3F00;
	text-decoration: none;
	border-top: 1px solid #E4FFD3;
	border-bottom: 1px solid #486B02;
}

ul.nav a:hover,
ul.nav a:active{
	background-color: #6DA203; 
}

<ul class="nav">
			<li><a href="home.htm">Home</a></li>
			<li><a href="home.htm">about</a></li>
			<li><a href="home.htm">our services</a></li>
			<li><a href="home.htm">our work</a></li>
			<li><a href="home.htm">news</a></li>
			<li><a href="home.htm">contact</a></li>
		</ul>

效果图