今天小编跟大家讲解下有关div+css实现仿猪八戒首页导航菜单效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关div+css实现仿猪八戒首页导航菜单效果 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下：
这是一款仿猪八戒2010年首页的网页导航菜单 蓝色风格 非常漂亮大气、简洁专业 在此推荐给大家。菜单上有一个标记 指引当前的位置 也是本菜单的亮点。用CSS究竟是如何实现的呢 那么就请一起看代码吧。
先来看看运行效果截图：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/div-css-fzbj-web-menu-style-codes/
具体代码如下：复制代码代码如下:<!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>仿2010猪八戒首页导航菜单</title><style type="text/css"><!--body{font:12px 微软雅黑,Verdana,Tahoma;}*{padding:0px;margin:0px;}* li{list-style:none;}a{text-decoration:none;color:#20537A;}a:hover{text-decoration:underline;}.clearfix:after { content:"\0020"; display: block; height: 0; clear: both;}.clearfix { _zoom: 1;}*+html .clearfix { overflow:auto;}.menu_navcc{width:970px; margin:0 auto;}.menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}.menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}.menu_nav .nav_content li.current{line-height:37px;}.menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}.menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}.menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}p{margin-bottom:15px}--></style></head><body style="text-align:center"><div style="height:100px;"></div><div style="clear:both"></div><!--nav,start--><div class="menu_navcc"><div class="menu_nav clearfix"><ul class="nav_content"><li class="current"><a href=""title="首页"><span>网站首页</span></a></li><li><a href=""title="广告代码"><span>广告代码</span></a></li><li><a href=""title="CSS教程"><span>CSS教程</span></a></li><li style="position:relative;"><a href=""title="导航菜单"><span>导航菜单</span></a><em></em></li><li><a href=""title="源码素材"><span>源码素材</span></a></li><li><a href=""title="常用代码"><span>常用代码</span></a></li></ul><div class="menu_nav_right"></div></div></div><!--nav,end--><p></p><p></p></body></html>
希望本文所述对大家的div+css程序设计有所帮助。
来源：爱蒂网
