在做公司网站的时候，遇上一个问题，想在头部加个导航联动菜单，因为导航名有长有短，JS实现的话困难诸多，于是想到用CSS来实现这个功能，这个实现的最大的难度就是兼容性问题，网上搜索了下，得到一段很实用的CSS样式，拿出来分享下，其中 CSS 样式内容为：

.cnt { width:980px;margin:0 auto;clear:both; overflow:hidden;text-align:left }
.m_t{ margin-top:8px; border:1px solid #000 }
.nav{width:1002px; height:50px; margin-top:1px; color:#00467d; font-family:Arial; overflow:visible; border:1px solid #ccc; line-height:50px;}
.nav .logo{ float:left; display:inline; margin:2px 5px 0px 0px }
.nav .nav_link {height:55px; float:left; margin:13px 3px}
.nav .in1{ width:120px; overflow:hidden; display:inline; float:left; margin:8px 0px 0px 5px }
.nav .in1 li{ float:left; display:inline; text-align:left; line-height:20px; margin-right:8px }
.nav .in1 a:link { color:#333; text-decoration:none }
.nav .in1 a:hover { color:#f00; text-decoration:underline }
.nav .in2{ float:left; display:inline; margin:5px 0px 0px 5px; line-height:20px }

.nav .t{ width:20px; height:50px; float:left; background:#F7F3F2; display:inline; line-height:25px; text-align:center; margin:5px 3px 0px 3px; color:#005BAE }
* html .nav .le{ margin-bottom:-1px }
*+html .nav .le{ margin-bottom:-1px }
.nav .link{ float:right; display:inline; margin:6px 10px 0px 0px; text-align:left; line-height:22px; filter:dropshadow(color=#ffffff, offx=1, offy=1, positive=1) }
.link span{ margin:0px 4px 0px 4px; padding:0px; }
.link a{ margin:0px; padding:0px; }
.lk1{ position:relative; z-index:100 }
.lk2{ position:relative; z-index:99 }
.lk1 ul{ position:relative; list-style-type:none }
.lk1 ul h3{ font-size:12px; font-weight:normal; padding:0px; margin:0px; line-height:24px }
.lk1 li { float:left; position:relative; width:70px;}
.lk1 ul li:hover ul, .lk1 ul a:hover ul{ visibility:visible }
.lk1 a{ display:block; line-height:24px; width:70px; }
.lk1 a.w1{ width:51px }
.lk1 a.w2{ width:53px }
.lk1 a.w3{ width:65px }
.lk1 a:link,.lk1 a:visited{ color:#333; text-decoration:none }
.lk1 a:hover{ border:0px solid #f00; color:#f00; text-decoration:underline }
.lk1 ul ul { visibility:hidden; position:absolute;left:-2px;top:18px; width:70px; z-index:100 }
.lk1 table { position:absolute; left:0; top:0; border:0px; padding:0px; border-collapse:collapse; border-spacing:0 }
.lk1 ul ul li { clear:both; background:#f5f5f5; filter: Alpha(opacity=80); -moz-opacity:.8; opacity:0.8; z-index:100 }
.lk1 ul ul li a{ padding:5px 3px 3px 3px; color:#000; position:relative; line-height:18px; color:#333333; z-index:100 }
.lk1 ul ul li a:link,.lk1 ul ul li a:visited{ color:#000 }
.lk1 ul ul li a:hover{ background:#cccccc; color:#cc0000 }

主要是通过鼠标伪类来实现菜单联动的，其中主要通过:hover 就是这个啦，大家不可能不知道这个啦。

好啦上面的贴完，该吧html 部分也贴出来了；