导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。
1、打开Dreamweaver创建新页面，输入以下代码。如图：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<script src="
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0padding:0border:0}
body {
font-family: arial, 宋体, serif
font-size:12px
}
#nav {
line-height: 24px list-style-type: none background:#666
}
#nav a {
display: block width: 80px text-align:center
}
#nav a:link {
color:#666 text-decoration:none
}
#nav a:visited {
color:#666text-decoration:none
}
#nav a:hover {
color:#FFFtext-decoration:nonefont-weight:bold
}
#nav li {
float: left width: 80px background:#CCC
}
#nav li a:hover{
}
#nav li a.on{ background:#999}
#nav li ul {
line-height: 27px list-style-type: nonetext-align:left
left: -999em width: 180px position: absolute
}
#nav li ul li{
float: left width: 180px
background: #F6F6F6
}
#nav li ul a{
display: block width: 180pxw\idth: 156pxtext-align:leftpadding-left:24px
}
#nav li ul a:link {
color:#666 text-decoration:none
}
#nav li ul a:visited {
color:#666text-decoration:none
}
#nav li ul a:hover {
color:#F3F3F3text-decoration:nonefont-weight:normal
background:#C00
}
#nav li:hover ul {
left: auto
}
#nav li.sfhover ul {
left: auto
}
#content {
clear: left
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
$(function(){
$("#nav li").hover(function(){
$(this).children("a").toggleClass("on")
})
})
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li")
for (var i=0 i<sfEls.length i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"")
}
}
}
window.onload=menuFix
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">百度知道</a>
<ul>
<li><a href="#">百度芝麻</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">百度行家</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">百度芝麻酱</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于百度</a>
<ul>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度1</a></li>
</ul>
</li>
<li><a href="#">在线百度</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系百度</a>
<ul>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
2、点击F12预览导航效果。如图：
注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。
