<!doctype html>
Document *{ margin: 0px; padding:0px; border:0; } .nav { background-color: #eee; width:600px; height: 40px; margin: 0 auto; } ul { list-style-type: none; } .nav ul li { float: left; line-height: 40px; text-align: center; } a { text-decoration: none; border: solid 3px purple; border-radius:5px; color: #000; padding: 0 10px; display: block; } a:hover { color: #FFF; background-color: #666; }
你仔细检查过你的代码么？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{ margin: 0px; padding:0px; border:0; }
.nav {
background-color: #eee;
width:600px;
height: 40px;
margin: 0 auto;
}
ul {
list-style-type: none;
}
.nav ul li {
float: left;
line-height: 40px;
text-align: center;
}
a {
text-decoration: none;
border: solid 3px purple;
border-radius:5px;
color: #000;
padding: 0 10px;
display: block;
}
a:hover {
color: #FFF;
background-color: #666;
}
</style>
</head>
<body>
<div class=nav>
<ul>
<li><a href="#">home</a></li>
<li>
<a href="#">products</a>
<ul>
<li><a href="#">coffee</a></li>
<li><a href="#">cake</a></li>
</ul>
</li>
<li><a href="#">service</a></li>
<li><a href="#">faqs</a></li>
<li><a href="#">about us</a></li>
</ul>
</div>
</body>
</html>
lb563
#2
2014年04月30日
@xfeile 建议先把帖子的格式整理一下。这样方便其它人阅读.可参考认识与入门 Markdown 另外可以到Christmas Button实时查看. 把 @miclle 的 Code 和你的 Code.对比一下。
我是刚学习 html 不久，想做一个弹出的二级菜单效果。刚开始代码是缩进好的，但是我看到一级二级挤在一起，我认为是缩进出了问题就全部取消缩进了。谢谢老师指点。这点代码也跟着教程一点点写的。
我还不会 Markdown，在 win7 上面练习，谢谢各位老师指点。我在看下我的代码。我知道哪里错了。二级的 ul 没有写到 li 里面。昨天晚上闭门造车搞了好几个小时。想不到问题出在这么简单的嵌套关系里面。