在新浪博客栏目看到其导航条简洁大方又不失动感美观，甚是欣赏，打开源文件又有新发现:大公司就是不一样，从不人云亦云，其导航条结构并没有采用教科书或网页教程众口一词的ul-li-a结构，而是采用“毫无技术含量”的文本平铺结构，代码精简直观，与新浪网页风格一样遵循着简单即美的理念，体现出开发人员对css深刻的理解和把握。
但是新浪博客导航条的特效部分是用js脚本实现的。下面我们尝试用纯html+css来实现它。
第一步，依据新浪的思路我们做一个基本导航条。
代码：
<style type="text/css">
a:link,a:visited{
float:left; /* 设置浮动使a成为块元素可设置高宽 */
width:4em; /* 菜单项宽度：4个默认字体宽<meta charset="gb2312"> */
text-decoration:none;
color:white;
background-color:#e04e00;
padding:0.5em 0.6em; /* 用内边距调节块高度及垂直对齐 */
border-right:1px solid ; /* 右边框做间隔线 */
border-color:#f0700e; /* 间隔线颜色 */
}
a:hover{
background-color:#f0700e;/*同菜单项间隔线颜色 */
}
</style>
<body>
<div>
<a href="#">娱乐</a>
<a href="#">体育赛事</a>
<a href="#">文史</a>
<a href="#">尚品堂</a>
</div>
</body>
执行结果：
上述代码简洁直观且只涉及a元素属性控制，也无须特别技巧，甚至连div元素都可有可无。效果媲美采用ul-li-a复杂结构设计的导航条。既然li元素拥有的属性a元素同样拥有，再用li元素来承载a元素来构造菜单，就有多余之嫌。
以上述代码为基础，以下我们尝试用纯html+css来实现剩余的特效。
第二步，添加鼠标悬停时菜单项增高特效
在上面代码a:hover选择器中插入下面代码（蓝色部分），作用是鼠标悬停时菜单项高度增加一点（0.4em），但是高度增加的部分会向下延展，需要将其重新定位。这里采用了相对定位，这样比绝对定位要简单一些，不用考虑与其他元素的互相影响，只要相对于自身原始位置作出上移即可。
a:hover{
background-color:#f0700e;
padding:0.7em 0.6em; /* 增加菜单项高度增加了0.4em */
position: relative; /* 增加的块高度会向下延展，需要将块位置提升 */
top:-0.4em; /* 上移0.4em */
}
执行结果：
比较接近了，菜单项右上角还差一个小三角“◣”
重温一下css关于相对定位的描述：元素框相对于自身原始位置偏移某个距离。元素仍然保持其未定位前的类型，它原本所占的空间仍保留。
幸好对菜单项做了相对定位后“它原本所占的空间仍保留”，不然该菜单项原空间会被后面的菜单项填补，我们的导航条也就面目全非啦。
第三步：添加鼠标悬停时菜单项右上角外加小三角“◣”
注意观察新浪博客导航条，这个小三角在菜单项方框之外，无法用背景图方法实现。实现这个特效的思路是：在菜单项中添加一个当鼠标悬停时可以进行重新定位的小三角，通过重新定位将小三角移出菜单项方框。遵循这一思路，我们继续特效设计。
1、用css制作小三角
原理：css可以独立控制块元素的4个边框，如果块元素的边框宽度相对于内容域足够大，边框的外在属性就会就会充分表现。
我们需要的小三角可以这样得到：内容区的高宽为缩小到0，4个边框宽度为小三角边长的一半，左下边框颜色为深红，上右边框颜色为透明，这样一个矩形看起来“像”小三角。绝大多数元素都可以用于制作小三角，以下用div元素制作小三角。
2、小三角div包含于菜单项中，使小三角能够与菜单项联动。
将小三角div插入到链接中（见蓝色代码），a元素必须包含div，作用有二：鼠标在菜单项悬停时能连带触发小三角div的选择器；a元素作为小三角div的定位基准。
<div>
<a href="#">娱乐<div></div></a>
<a href="#">体育赛事<div></div></a>
<a href="#">文史<div>/div></a>
<a href="#">尚品堂<div></div></a>
</div>
3、当鼠标悬停时对小三角div重定位。
以目前使用的css版本，鼠标在菜单项悬停时只能触发a:hover选择器，但a:hover选择器只能控制a元素属性，而不能控制小三角div的属性，如果鼠标在菜单项悬停时还可以触发另外一个控制小三角的选择器，那么解决问题的大门便敞开了。
有没有与a:hover选择器同时被触发选择器？有！这就是a:hover的后代选择器，如a:hover div（前提是在html中a包含了div）。现在用它生成并定位小三角，其css代码段是：
a:hover div{
/****** 开始生成小三角*****/
width:0px; /*内容区高度宽度为0**/
height:0px;
border-style: solid;
border-width: 0.2em; /*每边框宽度0.2em，则矩形边长0.4em，正好是鼠标悬停时菜单项增加的高度*/
border-color:transparent transparent #d00 #d00; /*上右边框透明，左下边框为深红色，形成小三角*/
/****** 开始定位，小三角以鼠标悬停时的菜单项为基准绝对定位 *****/
position:absolute;
top:0; right:-0.4em; /* 小三角关于菜单项方框右上角定位 */
}
这里的小三角用了绝对定位，这样无论菜单项大小位置如何变化，小三角始终定位在菜单项a的右上角，适应性广。
另外不要忘了，菜单项a已被定位（鼠标悬停时上移了0.4em）并且小三角被包含在菜单项a中，所以小三角可以以菜单项a作绝对定位。这一点非常重要，重温一下css关于绝对定位的描述：元素框相对于相对于包含它的最近的已定位祖先元素偏移某个距离。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
好了，运行一下
成功了。没有图片，没有JS，没有特别技巧。我们用纯html+css，充分运用控制html元素属性，用最少的元素，最简洁的代码实现了新浪特色的导航条。