經(jīng)常可以在別的網(wǎng)站上看到鼠標(biāo)懸停時塊狀導(dǎo)航菜單效果，如下圖：
 
當(dāng)鼠標(biāo)指向連接時，整個鏈接區(qū)域都發(fā)生了變化。那么，這樣的效果是如何用CSS實現(xiàn)的呢？先來看html代碼：
<div id="links"> <ul> <li><a href="#" title="Text">Link Heading One <em>Description of link.</em> <span>Date posted</span></a></li> <li><a href="#" title="Text">Link Heading One <em>Description of link.</em> <span>Date posted</span></a></li> </ul> </div> 
再來看如何來寫CSS：
#links ul {list-style-type: none; width: 400px;} /*設(shè)置鏈接樣式，并給ul設(shè)置寬度*/ #links li {border: 1px dotted #999; border-width: 1px 0; margin: 5px 0;}/*給li標(biāo)簽設(shè)置樣式*/ #links li a {color: #990000; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px; text-decoration: none;}/*關(guān)鍵在這一步，讓鏈接以塊級元素的方式顯示，這樣可以給a標(biāo)簽設(shè)置上下的高度，并讓鏈接周圍區(qū)域都變的可以觸擊*/ * html #links li a {width: 400px;}/* 讓鼠標(biāo)懸停效果在IE中顯示正常*/ #links li a:hover {background: #ffffcc;}/*設(shè)置鼠標(biāo)懸停時a標(biāo)簽的樣式*/ #links a em {color: #333; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%;}/*和上面讓鏈接變成塊級元素的方法一樣*/ #links a span {color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%;}/*設(shè)置span元素的樣式*/ 
在這里em和span標(biāo)簽不是必須的，但是如果需要的話必須寫在a標(biāo)簽之內(nèi)，這樣才能保證a標(biāo)簽樣式的統(tǒng)一。