css 浮动方式实现水平导航栏

wangjun5159

于 2016-02-24 17:08:03 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/50732198

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用CSS进行美化处理的导航菜单示例。通过设置浮动、背景颜色等属性，使得菜单项水平排列，并且在鼠标悬停时改变背景色。

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

ul.nav{
	float:left;
	list-style-type: none;
	margin:0;
	padding:0;
}

ul.nav li{
	float:left;
	margin-bottom: 1px;
	background-color: purple;
	color:white;
	line-height: 40px;
	margin-right: 1px;
	width: 140px;
	text-align: center;
}

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

<ul class="nav">
			<li>菜单1</li>
			<li>菜单2</li>
			<li>菜单3</li>
			<li>菜单4</li>
			<li>菜单5</li>
			<li>菜单6</li>
		</ul>

效果图：