CSS实现下拉菜单和 Tab切换
纯CSS下拉菜单也有好处，执行效率高，无需考虑客户端是否禁用了JS，定制样式也方便。问题是纯CSS的下拉菜单要支持各种浏览器，得写得好才行。
IE6只支持a标签的hover伪类，并不支持li:hover这种，所以用条件注释把下拉菜单写进<a></a>标签中。
就成这样了：
XHTML代码改写成:
<!--[if lte IE 6]><a href="#"><![endif]-->
<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>
<!--[if lte IE 6]></a><![endif]-->
CSS代码改写成：
dd{
display:none;
}
dl:hover dd,a:hover dd{
display:block;
}
但IE6有:hover伪类在IE6中的BUG。可以给a:hover 加 border:0来解决，所以你代码里有a:hover{border:0;}这一句，再次改写成：
dd{
display:none;
}
dl:hover dd,a:hover dd{
display:block;
}
a:hover{
border:0;
}
此时在IE6中鼠标移动到上面下拉菜单OK了。但给每个菜单加上连接的时候，IE6里又不行了，为什么？不知道。会不会是如果不放在table中的话，浏览器在解析html代码的时候，会提前解析a标签呢？不确定。可能因为table的解析方式是里面内容解析完成后再显示的，反正不管什么原因，
再给IE条件注释里的 a 标签里再套上一个表格，即XHTML代码改写成如下就OK了：
<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">一级菜单</a></dt>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
这就是为什么最后弄了个这么一句话：<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->的原因。
tab 切换
<style type="text/css">
dl {
position:relative;
width:240px;
height:200px;
}
dt {
position:absolute;
left:-2px;
top:-1.5em;
}
dt a {
display:block;
float:left;
margin:1px;
width:78px;
text-align:center;
font:bold 12px/1.8em "宋体", sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dt a:hover {
background:orange;
}
dd {
margin:0;
width:240px;
height:200px;
overflow:hidden;
border:1px solid #999;
}
ul {
margin:0;
padding:6px 0;
width:240px;
height:200px;
list-style:none;
}
li {
width:230px;
font:12px/1.8em "宋体", sans-serif;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<br />
<br />
<dl>
<dt><a href="#a" title="">电影</a><a href="#b" title="">电视</a><a href="#c" title="">动漫</a></dt>
<dd>
<ul id="a">
<li>·<a href="" title="">电影</a></li>
<li>·<a href="" title="">电影</a></li>
<li>·<a href="" title="">电影</a></li>
<li>·<a href="" title="">电影</a></li>
<li>·<a href="" title="">电影</a></li>
</ul>
<ul id="b">
<li>·<a href="" title="">电视</a></li>
<li>·<a href="" title="">电视</a></li>
<li>·<a href="" title="">电视</a></li>
<li>·<a href="" title="">电视</a></li>
<li>·<a href="" title="">电视</a></li>
</ul>
<ul id="c">
<li>·<a href="" title="">动漫</a></li>
<li>·<a href="" title="">动漫</a></li>
<li>·<a href="" title="">动漫</a></li>
<li>·<a href="" title="">动漫</a></li>
<li>·<a href="" title="">动漫</a></li>
</ul>
</dd>
</dl>
第二种实现
<style>
* {margin:0; padding:0;}
ul {list-style:none;margin:100px; }
li { float:left; width:80px; font-size:12px; border:#CCC solid 1px; padding:3px;}
li a {display:block; position:relative; text-decoration:none; text-align:center;}
li span {display:none; }
li a:hover span {display:block; margin:0px; width:320px; height:200px; position:absolute; top:18px; color:#fff; }
#s1 {left:-28px; background:#c00; }
#s2 {left:-102px; background:#00F }
#s3 {left:-188px; background:#3F3; }
#s4 {left:-256px; background:#000; }
</style>
<ul>
<li><a href="#" title="">电影<span id="s1">电影.....</span></a></li>
<li><a href="#" title="">电视剧<span id="s2">电视剧.....</span></a></li>
<li><a href="#" title="">动漫<span id="s3">动漫.....</span></a></li>
<li><a href="#" title="">全部排行<span id="s4">全部排行....</span></a></li>
</ul>
