本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下：

这是一款仿猪八戒2010年首页的网页导航菜单，蓝色风格，非常漂亮大气、简洁专业，在此推荐给大家。菜单上有一个标记，指引当前的位置，也是本菜单的亮点。用CSS究竟是如何实现的呢？那么就请一起看代码吧。

先来看看运行效果截图：

具体代码如下：
代码如下:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=/1999/xhtml

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: 020
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 style=clear:both
!--nav,start--
div class=menu_navcc
div class=menu_nav clearfix
ul class=nav_content
li class=currenta href=# title=首页网站首页/span/a/li
a href=# title=广告代码广告代码/span/a/li
a href=# title=CSS教程CSS教程/span/a/li
li style=position:relative;a href=# title=导航菜单导航菜单/span/aem/em/li
a href=# title=源码素材源码素材/span/a/li
a href=# title=常用代码常用代码/span/a/li

div class=menu_nav_right



!--nav,end--


/body
/html

希望本文所述对大家的div+css程序设计有所帮助。