css 实现的导航菜单/面包屑
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 实现的导航菜单/面包屑</title>
<style type="text/css">
* {padding: 0;margin: 0;text-decoration: none;}
body {background: #e4fff5;}
#nav li {list-style: none}
#nav {width: 1200px;height: 60px;background-color: #39C;position: relative;margin: 50px auto;}
#nav > li {float: left;height: 40px;padding: 10px;margin-left: 30px;line-height: 40px;}
#nav > li a {color: red;font-size: 20px;}
#nav li ul li {float: left;height: 30px;line-height: 30px;padding: 8px;background-color: #b2ff9f}
#nav li ul li span {padding-left: 20px;}
#nav li ul {display: none;position: absolute;margin-left: -10px;margin-top: 10px;}
#nav li ul a {color: #000}
/*#nav > li:hover ul {display: block}
#nav > li:hover {background-color: #ffbca6;}
#nav > li:nth-child(6n) {background-color: #FF0}*/
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></b>
</li>
<li><a href="#">产品与服务</a>
<ul>
<li><a href="#">咨询服务</a><span>|</span></li>
<li><a href="#">产品技术</a><span>|</span></li>
<li><a href="#">解决方案</a><span>|</span></li>
<li><a href="#">系统集成</a><span>|</span></li>
<li><a href="#">IT运营</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">政府</a><span>|</span></li>
<li><a href="#">医院</a><span>|</span></li>
<li><a href="#">集团</a><span>|</span></li>
<li><a href="#">学校</a><span>|</span></li>
<li><a href="#">其他</a></li>
</ul>
</li>
<li><a href="#">电子政府创新体验中心</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">企业文化</a>
<ul>
<li><a href="#">123</a><span>|</span></li>
<li><a href="#">123456</a><span>|</span></li>
<li><a href="#">abcd</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
