CSS实现的红色边框下拉导航菜单代码
代码简介:
只用CSS实现的导航下拉菜单,滑过变色,完全css代码,条例WEB标准,直接复制就可以使用啦,非常不错,推荐给大家。使用时候你可以复制多个菜单单元,这样就真正成了一个导航条,演示只是为了看效果,实际用时请根据你的网页面局修改一下
代码内容:
<!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> <title>CSS实现的红色边框下拉导航菜单代码_网页代码站(www.webdm.cn)</title> <style> .Nav { } .Nav li{ float:left; display:block; position:relative; } .Nav a{ float:left; display:block; position:relative; padding:2px 10px 2px 10px; font-size:12px; text-decoration: none; } .Nav li a:hover { color:#ffffff; background:#ea0000; } .Nav li table { display:none; border-collapse:collapse; } .Nav li:hover table, .Nav a:hover table { display:block; position:absolute; top:18px; left:0; background:#ea0000; } .Nav li:hover table a, .Nav a:hover table a { float:none; background:#f2f2f2; color:#000; width:100px; border-bottom:1px solid #fff; } .Nav li:hover table a:hover, .Nav a:hover table a:hover { background:#565656; color:#fff; } </style> </head> <body> <div class='Nav'> <li> <a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码! '>代码资源 <table><tr><td> <a href='/'>论坛社区</a> <a href='/'>新闻文章</a> </td></tr></table> </a> </li> <li> <a href='#'>脚本特效 <table><tr><td> <a href='http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码! '>CSS菜单</a> <a href='/'>表单特效</a> </td></tr></table> </a> </li> </div> </body> </html> <br> <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
代码来自:http://www.webdm.cn/webcode/1920689a-2bec-48df-b897-4f70b12ce6be.html