纯CSS下拉菜单导航代码，结合部分图片美化

发布时间：2018-09-03 18:53:20 所属栏目：政策来源：站长网

导读：一款纯CSS结合部分图片背景完成的下拉菜单代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。示例： !doctype htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead id=head1title纯css下

　　一款纯CSS结合部分图片背景完成的下拉菜单代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。

　　示例：

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id=head1> <title>纯css下拉菜单</title> <meta http-equiv=content-type content="text/html; charset=gbk"> <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(/uploads/allimg/1107/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(/uploads/allimg/1107/menu_04.gif) no-repeat left top; float: left; width: 122px; position: relative; height: 28px; text-align: center } .menuli_div { background: #0068aa; left: 1px; padding-bottom: 8px; width: 122px; position: absolute; top: 28px } .menuli_div li { background: url(/uploads/allimg/1107/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_div { display: none } .menuli_hover .menuli_div { display: block } </style> <body onselectstart="return false"> <div class=warper> <div 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_div> <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_div> <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_div> <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_div> <li><a href="#">淘宝</a></li> <li><a href="#">手机</a></li> <li><a href="#"><b>相机</b></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_div> <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>人才<b>招聘</b></a> <ul class=menuli_div> <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_div> <li><a href="#">联系我</a></li> <li><a href="#">联系她</a></li> <li><a href="http://www.veryhuo.com">烈火网</a></li> </ul></dt></dl></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!