<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>多选项切换导航菜单</title>
</head>
<style type="text/css">
#dNavBar{
background-color:#ffffff
}
#dNavBar li{
list-style-type:none
float:left
width:84px
height:28px
line-height:28px
font-size:12px
color:#FFFFFF
border:1px solid #ffffff
background:#86C2FF
text-align:center
display:block
cursor:pointer
}
#subMenu{
background:#99cc66
width:500px
border-left:1px solid #ffffff
border-right:1px solid #ffffff
height:29px
line-height:29px
color:#FFFFFF
font-size:12px
padding-left:10px
}
body {
margin: 0px
}
a:link,a:visited {
color: #FFFFFF
text-decoration: none
}
a:hover{
color: #FFFFFF
text-decoration: none
}
</style>
<script language="javascript">
function ShowMenu()
{
var barCTT=document.getElementByIdx_x("dNavBar")
var liArr=barCTT.getElementsByTagName_r("li")
var links=new Array()
links[0]="<a href='#'>当前位置：首页"
links[1]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>"
links[2]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[3]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>| <a href='#'>项目五</a>"
links[4]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[5]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[6]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[7]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[8]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[9]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[11]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[12]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
for (i=0i<liArr.lengthi++)
{
liArr[i].onclick=function()
{
selectThis(this,liArr,links)
}
}
}
function selectThis(indexObj,allLi,infoArr)
{
var index=0
for (i=0i<allLi.lengthi++)
{
allLi[i].style.border="1px solid #ffffff"
allLi[i].style.backgroundColor="#86C2FF"
allLi[i].style.height="28px"
if (indexObj==allLi[i])
{
index=i
}
}
indexObj.style.borderBottom="0px solid #666688"
indexObj.style.backgroundColor="#99cc66"
indexObj.style.height="31px"
document.getElementByIdx_x("subMenu").innerHTML=infoArr[index]
}
</script>
<body onLoad="ShowMenu()">
<div id="dNavBar" style="float:nonewidth:560px"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>
</div>
<div id="subMenu">站务公告</div>
</body>
</html>
给你一个朴素版的导航(包含css和html2部分)：css.css文件
body{
font-size:12px
font-family:Arial,
Helvetica,
sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-align:center
text-decoration:none
float:left
width:100px
padding:3px
5px
0px
5px
}
a:visited{
color:#336601
text-align:center
text-decoration:none
float:left
padding:3px
5px
0px
5px
width:100px
}
a:hover{
color:white
float:left
padding-left:6px
text-align:center
width:100px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px
3px
0px
20px
width:100px
text-align:center
text-decoration:none
background-color:#539D26
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px
5px
position:absolute
z-index:1
left:
198px
top:
25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px
4px
0px
0px
border:1px
solid
#9CDD75
background-color:#F1FBEC
color:#336601
padding:6px
0px
0px
cursor:pointer
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px
4px
0px
0px
background-color:#F5F5F5
color:#999999
border:1px
solid
#EEE8DD
padding:6px
0px
0px
0px
overflow-y:hidden
cursor:pointer
}
1.首先将以下代码插入到你body需要设置导航的地方<div id="navmenu">
<ul id="navi">
<li><a href="index.htm" _fcksavedurl="index.htm">梧桐首页
</a></li>
<li><a href="index1.htm" _fcksavedurl="index1.htm">网站优化
</a></li>
</ul>
</div>
<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi")
var links = nav.getElementsByTagName("li")
var lilen = nav.getElementsByTagName("a")//判断地址
var currenturl = document.location.href
var last = 0
for (var i=0i<links.lengthi++)
{
var linkurl = lilen[i].getAttribute("href")
if(currenturl.indexOf(linkurl)!=-1)
{
last = i
}
}
links[last].className = "navon" //高亮代码样式
</script>
2.然后将以下CSS代码添加到你网站的CSS文件中
#navmenu{ width:980px}
#navmenu ul{ padding:0pxmargin:0px}
#navmenu ul li{ float:leftwidth:80pxlist-style:none
text-align:centerheight:30pxline-height:30px}
.navon{ background:#000000} .navon a{ color:#ffffff}
看下这个吧，JS跟简单。但是没有JS，更没有DW，写不了。
