css代码：
#xinxi_menu{
width:200px;
margin:0 auto;
}
#menu {
overflow:hidden;
width:178px;
border:2px solid #456789;
}
#menu li {
list-style-type:none;
display:block;
width:178px;
border-width:0px;
}
#menu li a {
display:block;
text-decoration:none;
width:100%;
}
#menu li a span {
display:none;
color:#333;
font-size:12px;
padding-top:10px;
}
#menu li a:hover {
background-color:#233421;
}
#menu li a:hover span {
display:block;
background-color:#fff;
cursor:hand;
}
#menu h1 {
padding:20px;
margin-bottom:0px;
text-align:center;
color:#fff;
font-size:12px;
}
#first{
background-color:#3c94be;
}
#first_li span {
background:url(images/first_bg.gif) 0 0 repeat-x;
}
#second{
background-color:#40a1cf;
}
#second_li span {
background:url(images/second_bg.gif) 0 0 repeat-x;
}
#third{
background-color:#44abdd;
}
#third_li span {
background:url(images/third_bg.gif) 0 0 repeat-x;
}
#forth{
background-color:#48b8ee;
}
#forth_li span {
background:url(images/forth_bg.gif) 0 0 repeat-x;
}
html代码：
<div id="xinxi_menu">
<ul id="menu">
<li id="first_li"> <a href="#">
<h1 id="first"></h1>
<span> 目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。 </span> </a> </li>
<li id="second_li"> <a href="#">
<h1 id="second"></h1>
<span> 是Web的基本描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 </span> </a> </li>
<li id="third_li"> <a href="#">
<h1 id="third"></h1>
<span> 目前推荐遵循的是W3C于2000年1月26日推荐XML1.0XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML.简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 </span> </a> </li>
<li id="forth_li"> <a href="#">
<h1 id="forth"></h1>
<span> 目前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。 </span> </a> </li>
</ul>
</div>