上次在《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》（点击打开链接）给大家推荐过导航栏怎么写，

这次不用任何框架，纯手写CSS，原生态，方便各位改写！请笑纳。

一、首先是含有方块超级链接的导航栏，如下图：

这个东西个人觉得拼接在一些灰色巨幕下面做首页的导航栏不错

或者放在一些标签页上面也是可以的

代码如下：

<div style="width:70%; text-align:center; margin-left:auto; margin-right:auto; border-top: 1px solid #d4d4d4;">
<a href=http://www.mamicode.com/"#" style="display:block; float:left; border-right: 1px solid #dddddd; height:3em; width:120px; text-align: center; padding-top:1.5em; text-decoration:none; font-family:微软雅黑,Arial,宋体; background:#eeeeee; color:#aaaaaa;">按钮1>
首先你要定义一个大div放这些方块状的超级链接，这个大div，我定义其宽度为70，内容居中，自身居中，这些都不是关键属性，
关键属性一条仅长1px的灰色上边框，也就是大家看到最上方的那条长长的#d4d4d4灰色线
之后就是超级链接，这里的超级链接要显示为块状需要用到display:block属性，然后每一个超级链接以float:left并列在一行排列，不然block属性默认是一个div占据一行，然后每个块用了灰色右边框#dddddd，其实与那个大div颜色一样，用#d4d4d4也是没问题的
内容居中，设置好上内边距1.5em占其高度3em一半，好让其垂直居中，em是相对单位，这个组件可以根据浏览器的大小而改变自身大小
text-decoration:none是不要超级链接下面的下划线
之后把字体调好，
背景为更浅的灰#eeeeee
文字颜色较深一点，为#aaaaaa，有陷入感。

二、然后，为大家提供一个含有支持IE8的下拉菜单的导航栏
这个下拉菜单的效果图如下，无需javascript等脚本实现，纯粹的css：

悬停出现链接，
原生态的，只是在IE6好像不管用。
代码如下：
<div style="width:70%; text-align:center; margin-left:auto; margin-right:auto; border-top: 1px solid #d4d4d4;">
<style>
.drop>.dropdown{ display: none; }
.drop:hover>.dropdown{ display: block; }
</style>
<div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">
下拉菜单1▼
<div class="dropdown">
<a href=http://www.mamicode.com/"#">链接1
>
核心代码是那个<style><style>标签，指明class为dropdown的div要在鼠标悬停在class为drop的div才显示，否则不显示
于是乎就有了上面的效果。
其余的样式的道理与那个带方块的超级链接是相同的。
可惜在ie6支持不了div悬停效果，那下拉菜单就像僵尸那样不会动，网上查资料说要引入csshover3.htc文件，但似乎好像不管用，T^T，估计要兼容IE6要用jquery或者javascript写了，这东西
在IEtester测试如下：

【CSS】扁平化，支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏