发布两款纯CSS编写的下拉菜单-已测IE6,7,8,FF均可运行
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- rutongnet.com">www.rutongnet.com 网站标准化-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.rutongnet.com 网站标准化</title>
<style type="text/css">
*{margin:0; padding:0}
.menu{font-size:12px; position:relative; z-index:100}
.menu ul{list-style:none}
.menu li{float:left; position:relative}
.menu ul ul, .menu ul ul ul{visibility:hidden; position:absolute; left:3px; top:23px}
.menu table{position:absolute; top:0; left:0}
.menu ul li:hover ul, .menu ul a:hover ul{visibility:visible}
.menu a{display:block; border:1px solid #aaa; background:red; color:#fff; text-decoration:none; margin:3px; padding:2px 10px}
.menu a:hover{background:#f2cdb0; color:red; border:1px solid red}
.menu ul ul li{clear:both; text-align:left; font-size:12px}
.menu ul ul li a{display:block; width:100px; height:13px; border:0; border-bottom:1px solid red; margin:0}
.menu ul ul li a:hover{border:0; background:#f2cdb0; border-bottom:1px solid #fff}
</style>
<style type="text/css">
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">XHTML/CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">标准</a></li>
<li><a href="">教程</a></li>
<li><a href="">技术文章</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">布局教程专题</a></li>
<li><a href="">CSS菜单</a></li>
<li><a href="">浏览器兼容</a></li>
<li><a href="">滚动条相关</a></li>
<li><a href="">圆角矩形专题</a></li>
<li><a href="">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">Ajax
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">AJAX教程</a></li>
<li><a href="">AJAX技术</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">javascript
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">JSON</a></li>
<li><a href="">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">DOM</a></li>
<li><a href="">XML</a></li>
<li><a href="">正则表达式
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">正则表达式简介</a></li>
<li><a href="">正则表达式之道</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">网站优化</a></li>
<li><a href="">电脑网络</a></li>
<li><a href="">建站技术
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">PHP</a></li>
<li><a href="">ASP</a></li>
<li><a href="">ASP.NET</a></li>
<li><a href="">JSP</a></li>
<li><a href="">SQL</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Dreamweaver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div class="dddd"></div>
<br />
<br />
</body>
</html>
<html>
<!-- rutongnet.com">www.rutongnet.com 网站标准化-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.rutongnet.com 网站标准化</title>
<style type="text/css">
*{margin:0; padding:0}
.menu{font-size:12px; position:relative; z-index:100}
.menu ul{list-style:none}
.menu li{float:left; position:relative}
.menu ul ul, .menu ul ul ul{visibility:hidden; position:absolute; left:3px; top:23px}
.menu table{position:absolute; top:0; left:0}
.menu ul li:hover ul, .menu ul a:hover ul{visibility:visible}
.menu a{display:block; border:1px solid #aaa; background:red; color:#fff; text-decoration:none; margin:3px; padding:2px 10px}
.menu a:hover{background:#f2cdb0; color:red; border:1px solid red}
.menu ul ul li{clear:both; text-align:left; font-size:12px}
.menu ul ul li a{display:block; width:100px; height:13px; border:0; border-bottom:1px solid red; margin:0}
.menu ul ul li a:hover{border:0; background:#f2cdb0; border-bottom:1px solid #fff}
</style>
<style type="text/css">
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">XHTML/CSS
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">标准</a></li>
<li><a href="">教程</a></li>
<li><a href="">技术文章</a></li>
<li><a href="">常见问题</a></li>
<li><a href="">布局教程专题</a></li>
<li><a href="">CSS菜单</a></li>
<li><a href="">浏览器兼容</a></li>
<li><a href="">滚动条相关</a></li>
<li><a href="">圆角矩形专题</a></li>
<li><a href="">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">Ajax
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">AJAX教程</a></li>
<li><a href="">AJAX技术</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">javascript
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">JSON</a></li>
<li><a href="">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">DOM</a></li>
<li><a href="">XML</a></li>
<li><a href="">正则表达式
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">正则表达式简介</a></li>
<li><a href="">正则表达式之道</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">网站优化</a></li>
<li><a href="">电脑网络</a></li>
<li><a href="">建站技术
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">PHP</a></li>
<li><a href="">ASP</a></li>
<li><a href="">ASP.NET</a></li>
<li><a href="">JSP</a></li>
<li><a href="">SQL</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Dreamweaver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div class="dddd"></div>
<br />
<br />
</body>
</html>
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.rutongnet.com</title>
<style type="text/css">
.menu
{
font-family: 黑体;
font-weight: bold;
color: Gray; /*width:750px; */
position: relative;
font-size: 0.85em;
padding-bottom: 250px;
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
.menu ul li
{
float: left;
position: relative;
}
/*正常不移鼠标的样式*/
.menu ul li a, .menu ul li a:visited
{
display: block;
text-decoration: none;
color: Gray;
width: 139px;
height: 3em;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #dfc184;
padding-left: 10px;
line-height: 3em;
}
* html .menu ul li a, .menu ul li a:visited
{
width: 149px;
width: 139px;
}
.menu ul li ul
{
display: none;
}
table
{
margin: -1px;
border-collapse: collapse;
font-size: 1em;
}
/* specific to non IE browsers */
.menu ul li:hover a
{
color: #fff;
background: #bd8d5e;
}
/* 鼠标移上去的时候 */
.menu ul li:hover ul
{
display: block;
position: absolute;
top: 3em;
margin-top: 1px;
left: 0;
width: 150px;
}
.menu ul li:hover ul li ul
{
display: none;
}
.menu ul li:hover ul li a
{
display: block;
background: #faeec7;
color: #000;
height: auto;
line-height: 1.2em;
padding: 5px 10px;
width: 129px;
}
.menu ul li:hover ul li a.drop
{
background: #c9c9a7;
}
.menu ul li:hover ul li a:hover
{
background: #c9c9a7;
color: #000;
}
.menu ul li:hover ul li:hover ul
{
display: block;
position: absolute;
left: 150px;
top: 0;
width: 150px;
}
.menu ul li:hover ul li:hover ul.left
{
left: -150px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
margin-top:1px;
}
.menu ul li a:hover ul li a {
display:block;
background:#dbe4ab;
color:#000;
height:auto;
line-height:1.5em;
padding:5px 10px;
width:150px;
width:129px;
}
.menu ul li a:hover ul li a.drop {
background:#c9c9a7;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}
.menu ul li a:hover ul li a:hover {
background:#c9c9a7; color:#000;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
top:0;
color:#000;
left:150px;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="http://www.ntkingdee.com/">首页
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="The zero dollar ads page">zero dollars advertising
page</a></li>
<li><a href="http://www.52css.com/" title="Wrapping text around images">wrapping text
around images</a></li>
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">active focus</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click with no borders
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li class="upone"><a href="http://www.52css.com/" title="Multi-position drop shadow">
shadow boxing</a></li>
<li><a href="http://www.52css.com/" title="Image Map for detailed information">image
map for detailed information</a></li>
<li><a href="http://www.52css.com/" title="fun with background images">fun with background
images</a></li>
<li><a href="http://www.52css.com/" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="http://www.52css.com/" title="em size images compared">em image sizes compared</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">解决方案
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="a coded list of spies">a coded list of spies</a></li>
<li><a href="http://www.52css.com/" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="http://www.52css.com/" title="an enlarging unordered list">enlarging unordered
list</a></li>
<li><a href="http://www.52css.com/" title="an unordered list with link images">link
images</a></li>
<li><a href="http://www.52css.com/" title="non-rectangular links">non-rectangular</a></li>
<li><a href="http://www.52css.com/" title="jigsaw links">jigsaw links</a></li>
<li><a href="http://www.52css.com/" title="circular links">circular links</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">服务
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="A drop down menu">drop down menu</a></li>
<li><a href="http://www.52css.com/" title="A cascading menu">cascading menu</a></li>
<li><a href="http://www.52css.com/" title="Using content:">content:</a></li>
<li><a href="http://www.52css.com/" title=":hover applied to a div">mozzie box</a></li>
<li><a href="http://www.52css.com/" title="I can build a rainbow">I can build a rainbow
with transparent borders</a></li>
<li><a href="http://www.52css.com/" title="Snooker cue">a snooker cue using border art</a></li>
<li><a href="http://www.52css.com/" title="Target Practise">target practise</a></li>
<li><a href="http://www.52css.com/" title="Two tone headings">two tone headings</a></li>
<li><a href="http://www.52css.com/" title="Shadow text">shadow text</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">产品
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="Example one">the first example for Internet
Explorer</a></li>
<li><a href="http://www.52css.com/" title="Weft fonts">weft fonts</a></li>
<li><a href="http://www.52css.com/" title="Vertical align">vertically aligning text</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">走近儒通
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
colours</a></li>
<li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
HOVER/CLICK
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul class="left">
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">走近儒通
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
colours</a></li>
<li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
HOVER/CLICK
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul class="left">
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.rutongnet.com</title>
<style type="text/css">
.menu
{
font-family: 黑体;
font-weight: bold;
color: Gray; /*width:750px; */
position: relative;
font-size: 0.85em;
padding-bottom: 250px;
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
.menu ul li
{
float: left;
position: relative;
}
/*正常不移鼠标的样式*/
.menu ul li a, .menu ul li a:visited
{
display: block;
text-decoration: none;
color: Gray;
width: 139px;
height: 3em;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #dfc184;
padding-left: 10px;
line-height: 3em;
}
* html .menu ul li a, .menu ul li a:visited
{
width: 149px;
width: 139px;
}
.menu ul li ul
{
display: none;
}
table
{
margin: -1px;
border-collapse: collapse;
font-size: 1em;
}
/* specific to non IE browsers */
.menu ul li:hover a
{
color: #fff;
background: #bd8d5e;
}
/* 鼠标移上去的时候 */
.menu ul li:hover ul
{
display: block;
position: absolute;
top: 3em;
margin-top: 1px;
left: 0;
width: 150px;
}
.menu ul li:hover ul li ul
{
display: none;
}
.menu ul li:hover ul li a
{
display: block;
background: #faeec7;
color: #000;
height: auto;
line-height: 1.2em;
padding: 5px 10px;
width: 129px;
}
.menu ul li:hover ul li a.drop
{
background: #c9c9a7;
}
.menu ul li:hover ul li a:hover
{
background: #c9c9a7;
color: #000;
}
.menu ul li:hover ul li:hover ul
{
display: block;
position: absolute;
left: 150px;
top: 0;
width: 150px;
}
.menu ul li:hover ul li:hover ul.left
{
left: -150px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
margin-top:1px;
}
.menu ul li a:hover ul li a {
display:block;
background:#dbe4ab;
color:#000;
height:auto;
line-height:1.5em;
padding:5px 10px;
width:150px;
width:129px;
}
.menu ul li a:hover ul li a.drop {
background:#c9c9a7;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}
.menu ul li a:hover ul li a:hover {
background:#c9c9a7; color:#000;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
top:0;
color:#000;
left:150px;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="drop" href="http://www.ntkingdee.com/">首页
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="The zero dollar ads page">zero dollars advertising
page</a></li>
<li><a href="http://www.52css.com/" title="Wrapping text around images">wrapping text
around images</a></li>
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">active focus</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click with no borders
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li class="upone"><a href="http://www.52css.com/" title="Multi-position drop shadow">
shadow boxing</a></li>
<li><a href="http://www.52css.com/" title="Image Map for detailed information">image
map for detailed information</a></li>
<li><a href="http://www.52css.com/" title="fun with background images">fun with background
images</a></li>
<li><a href="http://www.52css.com/" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="http://www.52css.com/" title="em size images compared">em image sizes compared</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">解决方案
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="a coded list of spies">a coded list of spies</a></li>
<li><a href="http://www.52css.com/" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="http://www.52css.com/" title="an enlarging unordered list">enlarging unordered
list</a></li>
<li><a href="http://www.52css.com/" title="an unordered list with link images">link
images</a></li>
<li><a href="http://www.52css.com/" title="non-rectangular links">non-rectangular</a></li>
<li><a href="http://www.52css.com/" title="jigsaw links">jigsaw links</a></li>
<li><a href="http://www.52css.com/" title="circular links">circular links</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">服务
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="A drop down menu">drop down menu</a></li>
<li><a href="http://www.52css.com/" title="A cascading menu">cascading menu</a></li>
<li><a href="http://www.52css.com/" title="Using content:">content:</a></li>
<li><a href="http://www.52css.com/" title=":hover applied to a div">mozzie box</a></li>
<li><a href="http://www.52css.com/" title="I can build a rainbow">I can build a rainbow
with transparent borders</a></li>
<li><a href="http://www.52css.com/" title="Snooker cue">a snooker cue using border art</a></li>
<li><a href="http://www.52css.com/" title="Target Practise">target practise</a></li>
<li><a href="http://www.52css.com/" title="Two tone headings">two tone headings</a></li>
<li><a href="http://www.52css.com/" title="Shadow text">shadow text</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">产品
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="Example one">the first example for Internet
Explorer</a></li>
<li><a href="http://www.52css.com/" title="Weft fonts">weft fonts</a></li>
<li><a href="http://www.52css.com/" title="Vertical align">vertically aligning text</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">走近儒通
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
colours</a></li>
<li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
HOVER/CLICK
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul class="left">
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.52css.com/">走近儒通
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
colours</a></li>
<li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
<li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
<li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
HOVER/CLICK
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table>
<tr>
<td>
<ul class="left">
<li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
<li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
borders</a></li>
<li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
hover/click</a></li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>
