经常可以在别的网站上看到鼠标悬停时块状导航菜单效果，如下图：

当鼠标指向连接时，整个链接区域都发生了变化。那么，这样的效果是如何用CSS实现的呢？先来看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;} /*设置链接样式，并给ul设置宽度*/
#links li {border: 1px dotted #999; border-width: 1px 0; margin: 5px 0;}/*给li标签设置样式*/
#links li a {color: #990000; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px; text-decoration: none;}/*关键在这一步，让链接以块级元素的方式显示，这样可以给a标签设置上下的高度，并让链接周围区域都变的可以触击*/
* html #links li a {width: 400px;}/* 让鼠标悬停效果在IE中显示正常*/
#links li a:hover {background: #ffffcc;}/*设置鼠标悬停时a标签的样式*/
#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%;}/*设置span元素的样式*/

在这里em和span标签不是必须的，但是如果需要的话必须写在a标签之内，这样才能保证a标签样式的统一。