.woaicss_con ul {
width:418px;
height:250px;
margin:12px auto;
}
.woaicss_con li {
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.woaicss_con li a {
color:#03c;
}
.woaicss_con li a:hover {
color:#069;
text-decoration:underline;
}

　　此处不是本文重点，所以不再赘述。
七：细节修饰

　　我们这里的链接并未起到真正的URL转向的作用，仅是一个标签，所以我们可以将其虚线框去除，以让我们的页面更加的工整与自然。将下面的代码另存为xuxian.htc文件：

Example Source Code []

<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>

　　我们在CSS样式中添加这一句代码：a {behavior:url(xuxian.htc)}
　　这样就可以去除了链接虚线框（请注重 在FF中此效果无效）。

八：最终效果及举一反三：

　　
　　在我们的实现工作中可能会碰到另外一种情况：
　　我们需要实现当鼠标划过时进行切换，当鼠标点击时打开相应内容的链接。
　　我们将无序列表UL作如下修改即可实现：

Example Source Code []

<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="#" onmouseover="javascript:woaicssq(1)"></a></li>
<li><a href="#" onmouseover="javascript:woaicssq(2)">Div CSS教程</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(3)">CSS布局实例</a></li>
<li><a href="#" onmouseover="javascript:woaicssq(4)">WEB标准化</a></li>
</ul>