这篇文章主要为大家介绍了纯CSS实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了纯CSS实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：
这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。
运行效果截图如下：
具体代码如下：
纯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}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
以上就是关于CSS实现漂亮的下拉导航效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610486.html
微信扫一扫 
支付宝扫一扫 
