【图】CSS制作的背景动态变化的网页导航

自己写的个导航,感觉还不错...惟一的不足就是hack比较多,如果有简洁的方式实现,请留言告诉我...呵呵...

样式部分:

#headerMenu {
    width:560px;
    margin:30px auto;
}
.menu {
    font-size:14px;
    line-height:18px;
    *line-height:32px;
}
.menu li {
    display:inline;
}
.menu a:link,
.menu a:visited{
    display:-moz-inline-stack;/*FF下有效*/
    *display:inline;/*此行及下行为IE定义*/
    zoom:1;
    width:80px;
    padding:8px 0px 6px 0px;
    *padding:0;
    float:left;
    color:#014A99;
    text-align:center;
    text-decoration:none;
    background:url(/files/081222/1_164717.gif);
}
.menu a:hover{
    color:#FFF;
    font-weight:bold;
    background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg);
}
.home{
    background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg)!important;
    color:#FFF !important;
    font-weight:bold;
}

运行查看效果:

!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta name="Author" content="网页教学网" /meat name="Author BlogURL" content="http://www.webjx.com" /titleli等宽水平导航/titlestyle type="text/css"!--*{margin:0;padding:0;}body{background:#FFF;font:12px normal Arial, Helvetica, sans-serif #444;line-height:18px;}#headerMenu {width:560px;margin:30px auto;}.menu {font-size:14px;line-height:18px;*line-height:32px;}.menu li {display:inline;}.menu a:link,.menu a:visited{display:-moz-inline-stack;/*FF下有效*/*display:inline;/*此行及下行为IE定义*/zoom:1;width:80px;padding:8px 0px 6px 0px;*padding:0;float:left;color:#014A99;text-align:center;text-decoration:none;background:url(http://www.webjx.com/files/081222/1_164717.gif);}.menu a:hover{color:#FFF;font-weight:bold;background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg);}.home{background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg)!important;color:#FFF !important;font-weight:bold;}//--/style/headbodydiv id="headerMenu"ul class="menu"lia href="/" class="home"首页/a/lilia href="show.htm"产品展示/a/lilia href="case.htm"成功案例/a/lilia href="service.htm"客户服务/a/lilia href="download.htm"下载中心/a/lilia href="contact.htm"联系我们/a/lilia href="about.htm"关于我们/a/li/ul/div/body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]