完全CSS实现的下拉导航菜单

2024-09-05 12:19:45

字体：大中小

来源：转载

供稿：网友

只用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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉菜单</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>源码资源<table><tr><td>论坛社区新闻文章</td></tr></table></li><li>脚本特效<table><tr><td>CSS菜单表单特效</td></tr></table></li></div></body></html>

上一篇：CSS多风格的立体层菜单

下一篇：虚线边框的CSS垂直菜单