Css
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<TITLE>DIV+CSS copy Microsoft Home Bottom </title>
<style type= "Text/css" >
<!--
#dotmid
{
}
#dotMid ul
{
Float:left; margin-left:10px;
}
#dotMid Li
{
width:100px; Float:none; height:40px; Background: #ccc; Border:solid 1px #000; Border-left:none;border-right:none; Cursor:pointer; position:relative;
}
#dotMid Li:hover
{
background:red;
}
#dotMid Li div{
width:300px; Height:250px;background:red;text-align:center; Color: #fff;
}
#dotMid Li #dot1
{
Display:block; Position:absolute; left:100px;
}
#dotMid Li #dot2
{
Display:none; Position:absolute; left:100px; top:-42px;
}
#dotMid Li #dot3
{
Display:none; Position:absolute; left:100px; top:-84px;
}
#dotMid Li #dot4
{
Display:none; Position:absolute; left:100px; top:-126px;
}
#dotMid Li #dot5
{
Display:none; Position:absolute; left:100px; top:-168px;
}
#dotMid Li #dot6
{
Display:none; Position:absolute; left:100px; top:-210px;
}
#dotMid Li:hover #dot1
{
Display:block;
}
#dotMid Li:hover #dot2
{
Display:block;
}
#dotMid Li:hover #dot3
{
Display:block;
}
#dotMid Li:hover #dot4
{
Display:block;
}
#dotMid Li:hover #dot5
{
Display:block;
}
#dotMid Li:hover #dot6
{
Display:block;
}
-->
</style>
<body>
<div id= "Dotmid" >
<ul id= "" >
<li> column 1<div id= "DOT1" >
My friend </div>
</li>
<li> column 2<div id= "Dot2" >
Classic </div>
</li>
<li> column 3<div id= "DOT3" >
Arsan</div>
</li>
<li> column 4<div id= "DOT4" >
Esun</div>
</li>
<li> column 5<div id= "DOT5" >
Forum </div>
</li>
<li> column 6<div id= "DOT6" >
Blueidea</div>
</li>
</ul>
</div>
</body>