利用边框实现网页导航栏的动态效果

网页导航栏需要加点儿动态效果，来区别其他元素。图片太费劲，直接用文字效果比较简单。文字上可用的效果不外乎字体大小、颜色，背景颜色，边框效果等。边框指示效果最明显。

Google和jQuery网站有两种不同的加边框方式。
Google页面导航栏如下：

[](//ww2.sinaimg.cn/large/4afdac38tw1dtoqjxwskwj.jpg)

边框加在上面，但将标签内的空间分成两个部分，分别显示边框和文字。
[html]

搜索

图片

[/html]
a及两个span有相同的宽度，这样两个span就能上下排列。第一个span只有上边框的高度，height为0。第二个span则是文字信息。
当前页面，边框用红色标出，border-top-color:#DD4B39!important 。
非当前页面，边框颜色继承父元素颜色，2px solid transparent 。
jQuery页面导航栏如下：

[](//ww4.sinaimg.cn/large/4afdac38tw1dtoqjxjmvqj.jpg)

直接用标签的下边框。
[html]

Plugins

UI

[/html]
CSS
[css]
#dock ul li a:hover,
#dock ul li.selected a {
color: #fff;
border-bottom: 2px solid #ff9c08;
}
[/css]
当前页面，a有下边框；但非当前页面，a没有下边框。当在a上悬停时，a在显示出下边框。
这种方式只能把边框放在下方。因为a元素总体高度有变化（与是否有边框相关），若在不显示边框的页面中，动态给a加边框，会使a中的文字位置下移，但边框在下边就不会改变文字的位置。当然，像google那样处理一下也行。
我就是这样做的。
HTML代码
[html]

首页

发布

[/html]
CSS代码
[css]
.nav-panel ol>li a{
display:block;
font-size:20px;
line-height:38px;
text-align:center;
width:45px;
border-top:solid 2px black;
}
.nav-panel ol li.selected a,.nav-panel ol li a:hover{
border-top:solid 2px red;
}
.nav-panel ol li a:hover{
background-color:#333;
}
[/css]
这是最后的效果：