CSS导航栏（仿W3School）

2014-01-22 22:04分类: CSS评论: 1

演示

说明:同行可以设置float:left或者display:inline两者效果略有不同，似乎前者效果更佳更新:兼容性问题在html最前加入：

1<!DOCTYPE html>
2

但仍然不兼容IE6及以下，是因为不支持li:hover ul这个写法

1<html>
2<head>
3	<title></title>
4	<link rel="stylesheet" type="text/css" href="nav.css">
5</head>
6<body>
7	<div>
8		<ul>
9			<li><a href="#">Home</a></li>
10			<li>
11				<a href="#">NEW</a>
12				<ul>
13					<li><a href="#">A</a></li>
14					<li><a href="#">B</a></li>
15				</ul>
16			</li>
17			<li><a href="#">ARTICLES</a></li>
18			<li><a href="#">FORUM</a></li>
19			<li><a href="#">CONTACT</a></li>
20			<li><a href="#">ABOUT</a></li>
21		</ul>
22	</div>
23</body>
24</html>
25

1body {
2	margin:0;
3	padding: 0;
4}
5div {
6	width: 600px;    /* 导航条居中宽度要与导航条长度一致 */
7	margin: 0 auto;
8}
9
10ul {
11	list-style-type: none;
12	margin: 0;
13	padding: 0;
14}
15
16li {
17	float:left; 
18	/* display: inline; */
19	background-color: #bcbcbc;
20	width:100px;
21	height:30px;
22	text-align: center;
23}
24
25a {
26	font-size: 14px;
27	color: white;
28	font-weight: bold;
29	text-decoration: none;
30	line-height: 30px;
31	display: block;
32}
33
34li a:hover {
35	background-color: #cc0000;
36}
37
38li ul {
39	display: none;
40}
41
42li:hover ul{
43	display: block;
44}
45

CodeSky 代码之空

CSS导航栏（仿W3School）

评论 (1)