div+css实现鼠标经过背景高亮的导航菜单代码

本文实例讲述了div+css实现鼠标经过背景高亮的导航菜单代码。分享给大家供大家参考。具体如下：

这是一款鼠标经过后切换背景的导航菜单，简单明了，给新手学习。已测试，兼容IE6、7、8、9，Firefox3、4、5、6，Chrome5以上，opera，Safare，搜狗，遨游，360，TT ......

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/div-css-mouse-bg-show-nav-menu-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>
title> 鼠标经过切换背景的导航菜单/title>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
style type="text/css">
!--
body,td,th { font-Size: 13px; }
h1 { font-size:13px; font-weight:normal; margin:20px auto; }
a:link,a:visited { color:#333333; text-decoration:none; }
#nav {
width:960px; margin-top:3px; text-align:center; background:url(images/bg_nav.gif) repeat-x; border:1px solid #CCC; }
#nav ul{ width:700px; margin:0 auto; height:25px; padding:0; text-align:center; background-color:#CCC; border-bottom:5px solid #FFF; }
#nav li { padding:0; list-style: none; display:inline; }
#nav a { float:left; overflow:hidden; width:100px; height:25px; color:#333333; text-decoration:none; background:url(images/nav.gif) top left no-repeat; padding-top:5px; }
#nav a:hover { background-position:0 -30px; }
-->
/style>
/head>
body>
h1> 办公一百分导航菜单,简单明了，给新手学习。/h1>
p> 已测试，兼容IE6、7、8、9，Firefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ....../p>
div id="nav">
ul>
li> a href="#"> 首 页/a> /li>
li> a href="#"> 业内新闻/a> /li>
li> a href="#"> Word教程/a> /li>
li> a href="#"> Excel教程/a> /li>
li> a href="#"> PPT教程/a> /li>
li> a href="#"> 其它教程/a> /li>
li> a href="#"> 专题教程/a> /li>
/ul>
/div>
/body>
/html>

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！