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

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

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

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

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

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

代码如下：

<div style="width:70%; text-align:center; margin-left:auto; margin-right:auto; border-top: 1px solid #d4d4d4;"><a href="#" 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</a><a href="#" 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;">按钮2</a></div>

首先你要定义一个大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="#">链接1</a><br /><a href="#">链接2</a><br /><a href="#">链接3</a><br /><a href="#">链接4</a><br /><a href="#">链接5</a><br /><a href="#">链接6</a><br /></div></div><div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">下拉菜单2▼<div class="dropdown"><a href="#">链接1</a><br /><a href="#">链接2</a><br /><a href="#">链接3</a><br /><a href="#">链接4</a><br /><a href="#">链接5</a><br /><a href="#">链接6</a><br /></div></div><div class="drop" style="border-right: 1px solid #dddddd; width:15%; float:left;">下拉菜单3▼<div class="dropdown"><a href="#">链接1</a><br /><a href="#">链接2</a><br /><a href="#">链接3</a><br /><a href="#">链接4</a><br /><a href="#">链接5</a><br /><a href="#">链接6</a><br /></div></div></div>

核心代码是那个<style><style>标签，指明class为dropdown的div要在鼠标悬停在class为drop的div才显示，否则不显示

于是乎就有了上面的效果。

其余的样式的道理与那个带方块的超级链接是相同的。

可惜在ie6支持不了div悬停效果，那下拉菜单就像僵尸那样不会动，网上查资料说要引入csshover3.htc文件，但似乎好像不管用，T^T，估计要兼容IE6要用jquery或者javascript写了，这东西

在IEtester测试如下：