抄一个 CSS+DIV菜单

2007-12-13 17:49:42

[code]<!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="#" class="fb">数码产品</a><span> <li><a href="#" class="test">数码相机</a></li> <li><a href="#" class="test">数码摄像机</a></li> <li><a href="#" class="test">MP3&MP4</a></li> <li><a href="#" class="test">数码存储卡</a></li> </span> </ul> <ul class="menu"> <a href="#" class="fb">电脑硬件</a><span> <li><a href="#" class="test">主板&CPU</a></li> <li><a href="#" class="test">内存</a></li> <li><a href="#" class="test">硬盘</a></li> <li><a href="#" class="test">显示器</a></li> <li><a href="#" class="test">键盘</a></li> <li><a href="#" class="test">鼠标</a></li> <li><a href="#" class="test">显卡</a></li> <li><a href="#" class="test">声卡</a></li> </span> </ul> <ul class="menu"> <a href="#" class="fb">报刊杂志</a><span> <li><a href="#" class="test">微型计算机</a></li> <li><a href="#" class="test">新潮电子</a></li> <li><a href="#" class="test">电脑报</a></li> <li><a href="#" class="test">电脑商情报</a></li> </span> </ul> <ul class="menu"> <a href="#" class="fb">音象制品</a><span> <li><a href="#" class="test">CD</a></li> <li><a href="#" class="test">DVD</a></li> <li><a href="#" class="test">电影</a></li> <li><a href="#" class="test">音乐</a></li> </span> </ul> </div> </body> </html> [/code]