在新浪博客欄目看到其導航條簡潔大方又不失動感美觀，甚是欣賞，打開源文件又有新發現:大公司就是不一樣，從不人云亦云，其導航條結構並沒有採用教科書或網頁教程衆口一詞的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元素屬性，用最少的元素，最簡潔的代碼實現了新浪特色的導航條。