CSS导航栏（仿W3School）
说明:同行可以设置float:left或者display:inline两者效果略有不同，似乎前者效果更佳
更新:兼容性问题在html最前加入：
<!DOCTYPE html>但仍然不兼容IE6及以下，是因为不支持li:hover ul这个写法
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">NEW</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
<li><a href="#">ARTICLES</a></li>
<li><a href="#">FORUM</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>body {
margin:0;
padding: 0;
}
div {
width: 600px; /* 导航条居中宽度要与导航条长度一致 */
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float:left;
/* display: inline; */
background-color: #bcbcbc;
width:100px;
height:30px;
text-align: center;
}
a {
font-size: 14px;
color: white;
font-weight: bold;
text-decoration: none;
line-height: 30px;
display: block;
}
li a:hover {
background-color: #cc0000;
}
li ul {
display: none;
}
li:hover ul{
display: block;
}植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。
师姐可以告诉我你qq吗