这篇文章主要为大家介绍了纯css实现漂亮的下拉导航效果代码,通过简单的css样式设置及针对鼠标事件的响应实现下拉菜单导航效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了纯css实现漂亮的下拉导航效果代码。分享给大家供大家参考。具体如下：
这是一款纯css完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成ok，有需要的朋友可以拿去。
运行效果截图如下：
具体代码如下：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en""http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id=head1><title>纯css下拉菜单</title><meta http-equiv=content-type content="text/html; charset=utf-8"><style>* { 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}</style><body onselectstart="return false"><p class=warper><p class=menu><dl> <dd><a href="#" target=_self>首页</a></dd> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>关于家乡网</a> <ul class=menuli_p> <li><a href="#">about</a></li> <li><a href="#">家乡网</a></li> <li><a href="#">中国网</a></li> <li><a href="#">大武汉</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>资讯动态</a> <ul class=menuli_p> <li><a href="#">省内</a></li> <li><a href="#">省外</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>组织机构</a> <ul class=menuli_p> <li><a href="#">省委</a></li> <li><a href="#">政府</a></li> <li><a href="#">政协</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>主营业务</a> <ul class=menuli_p> <li><a href="#">淘宝</a></li> <li><a href="#">手机</a></li> <li><a href="#">相机</a></li> <li><a href="#">电脑</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>品牌战略</a> <ul class=menuli_p> <li><a href="#">一杯水</a></li> <li><a href="#">城市生活</a></li> <li><a href="#">家乡网</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>人才招聘</a> <ul class=menuli_p> <li><a href="#">我的家</a></li> <li><a href="#">家乡网</a></li> </ul></dt> <dt class=menuli onmouseover="this.classname='menuli_hover'" onmouseout="this.classname='menuli'"><a href="#" target=_self>联系我们</a> <ul class=menuli_p> <li><a href="#">联系我</a></li> <li><a href="#">联系她</a></li> <li><a href="#">我的家</a></li> </ul></dt></dl></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
以上就是关于css实现漂亮的下拉导航效果的详细内容。