效果见图,IE7、FF下测试通过。有朋友说IE6下不显示。。 [sweat] 回家再看看好了。
演示地址：http://www.5key.net/ex/12_7
<!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>css菜单-5key.net</title>
<style>
/*
Power by：http://www.5key.net
*/
body{font-size:12px; font:Arial, Helvetica, sans-serif; background:white; padding:0px; margin:0px;}
ul,li{margin:0px; padding:0px; clear:both; list-style:none;}
.fb{font-weight:bold;}
.nav{background:#000; height:20px; color:white; font-size:14px; font-weight:bold; padding:5px;}
.menu{ display:block;}
.menu a{width:300px; border:1px solid #000; color:white; border-top:0px; padding:4px; background:#F00; margin:0 0 0 20px; text-decoration:none; float:left; cursor:hand; }
.menu a:hover{width:300px; border:1px solid #000; color:white; border-top:0px; padding:4px; background:#F00; margin:0 0 0 20px; text-decoration:none; float:left; cursor:hand;}
.menu span{display:none; clear:both;}
.menu:hover span{display:block; width:300px; color:#666; border-top:0px; background:#FFFddd; margin:0 0 0 22px;}
a.test{ background:#f5f5f5; text-decoration:none; color:#666; margin:0 0 0 -2px;}
a.test:hover{ background:#FFFddd; text-decoration:none; color:#F00; margin:0 0 0 -2px;}
</style>
</head><body>
<div class=”nav”>其实，我是一个菜单</div>
<div>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>数码产品</a><span>
<li><a href=”#” mce_href=”#” class=”test”>数码相机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>数码摄像机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>MP3&MP4</a></li>
<li><a href=”#” mce_href=”#” class=”test”>数码存储卡</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>电脑硬件</a><span>
<li><a href=”#” mce_href=”#” class=”test”>主板&CPU</a></li>
<li><a href=”#” mce_href=”#” class=”test”>内存</a></li>
<li><a href=”#” mce_href=”#” class=”test”>硬盘</a></li>
<li><a href=”#” mce_href=”#” class=”test”>显示器</a></li>
<li><a href=”#” mce_href=”#” class=”test”>键盘</a></li>
<li><a href=”#” mce_href=”#” class=”test”>鼠标</a></li>
<li><a href=”#” mce_href=”#” class=”test”>显卡</a></li>
<li><a href=”#” mce_href=”#” class=”test”>声卡</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>报刊杂志</a><span>
<li><a href=”#” mce_href=”#” class=”test”>微型计算机</a></li>
<li><a href=”#” mce_href=”#” class=”test”>新潮电子</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电脑报</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电脑商情报</a></li>
</span>
</ul>
<ul class=”menu”>
<a href=”#” mce_href=”#” class=”fb”>音象制品</a><span>
<li><a href=”#” mce_href=”#” class=”test”>CD</a></li>
<li><a href=”#” mce_href=”#” class=”test”>DVD</a></li>
<li><a href=”#” mce_href=”#” class=”test”>电影</a></li>
<li><a href=”#” mce_href=”#” class=”test”>音乐</a></li>
</span>
</ul>
</div>
</body>
</html>
