<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;margin:0;
}
.demo
{
width:1000px;
height:180px;
margin:10px auto;
}
.demo ul li,dl,dd,dt
{
list-style-type:none;
}
.demo ul li
{
float:left;
margin:10px 0 0 7px;
position:relative;
}
.demo ul li div
{
position: absolute;
top: 0;
left: 100%;
z-index: 22;
background: #ccc;
width: 305px;
height: 170px;
border: 2px solid #F00;
display:none;
}
.demo ul li a
{
display:block;
border:2px solid #ccc;
}
ul li div dl dt{
text-align:center;
}
ul li div dl dd{
text-indent:2em;
}
</style>
</head>
<body>
<div class="demo">
<ul class="orginImg" id="orginImg" >
<li>
<a href="#"><img src="单行侧位展示效果/1.jpg" /></a>
<div>
<dl>
<dt>学会html5 绝对的屌丝逆袭</dt>
<dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>
</dl>
</div>
</li>
<li>
<a href="#"><img src="单行侧位展示效果/2.jpg" /></a>
<div>
<dl>
<dt>圆角水晶按钮制作</dt>
<dd>网页中的圆角按钮和宽度自适应按钮就这么轻松制作</dd>
</dl>
</div>
</li>
<li>
<a href="#"><img src="单行侧位展示效果/3.jpg" /></a>
<div>
<dl>
<dt>导航条菜单的制作</dt>
<dd>30分钟教你轻松制作出各种形式的网站导航条菜单</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>
