这篇文章主要为大家介绍了纯CSS实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：
这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。
运行效果截图如下：
具体代码如下：
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">纯CSS下拉菜单 * { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}UL { LIST-STYLE-TYPE: none}LI { LIST-STYLE-TYPE: none}DL { LIST-STYLE-TYPE: none}DD { LIST-STYLE-TYPE: none}DT { LIST-STYLE-TYPE: none}A { COLOR: #414141; TEXT-DECORATION: none}IMG { DISPLAY: inline-block; FONT-SIZE: 12px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none}A:hover { COLOR: #c51007}#dangqian A { COLOR: #c51007}.clear { CLEAR: both}.warper { MARGIN: 0px auto; WIDTH: 1000px}.menu { MARGIN-TOP: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/menu_02.gif) repeat-x; LINE-HEIGHT: 28px; HEIGHT: 28px}.menu_01 { FLOAT: left}.menu_02 { FLOAT: right}.menu A { FONT-WEIGHT: bold; COLOR: #fff}.menu A:hover { COLOR: #b8def6}.menu DL { FLOAT: left}.menu DD { FLOAT: left; WIDTH: 132px; TEXT-ALIGN: center}.menu DT { PADDING-LEFT: 1px; BACKGROUND: url(images/menu_04.gif) no-repeat left top; FLOAT: left; WIDTH: 122px; POSITION: relative; HEIGHT: 28px; TEXT-ALIGN: center}.menuli_p { BACKGROUND: #0068aa; LEFT: 1px; PADDING-BOTTOM: 8px; WIDTH: 122px; POSITION: absolute; TOP: 28px}.menuli_p LI { BACKGROUND: url(images/menu_05.gif) no-repeat center bottom; PADDING-BOTTOM: 1px; LINE-HEIGHT: 24px; HEIGHT: 24px}.menu DT UL LI A { FONT-WEIGHT: normal}.menuli .menuli_p { DISPLAY: none}.menuli_hover .menuli_p { DISPLAY: block}
登录后复制 首页 关于家乡网 About 家乡网 中国网 大武汉 资讯动态 省内 省外 组织机构 省委 政府 政协 主营业务 淘宝 手机 相机 电脑 品牌战略 一杯水 城市生活 家乡网 人才招聘 我的家 家乡网 联系我们 联系我 联系她 我的家
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
以上就是关于CSS实现漂亮的下拉导航效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2895873.html
