如何做三级导航 要求内详

Question

需要一个导航 点击以后高亮不消失 产生二级菜单 再点击产生三级菜单 如此
已写好html代码 不知道js 怎么写 求教了 谢谢
<style>
.menu{
width:1000px;
height:700px;
margin:20px auto;
}
.category,.type,.problem{
width:300px;
height:680px;
float:left;
margin-right:6px;
}
.category_menu,.problemtype_menu,.problem_menu{
width:300px;
height:660px;
overflow:auto;
overflow-x:hidden;
}
.category_menu div,
.problemtype_menu div,
.problem_menu div{
border:1px solid #000;;
width:296px;
height:35px;
margin:6px 0;
line-height:35px;
}
</style>
<div id="content">
<div class="menu">
<div class="category">
<div>Choose category</div>
<div class="category_menu">
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
</div>
</div>
<div class="type">
<div>Choose problemtype</div>
<div class="problemtype_menu">
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
</div>
</div>
<div class="problem">
<div>Choose problem</div>
<div class="problem_menu">
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
<div><a href="#">1</a></div>
</div>
</div>
</div>
</div>

Answer 1

点击菜单让js控制他的下级菜单display:none block就可以了，至于他们的样式，提前写好，放那吧。如果有点当前菜单需要修改当前菜单样式，可以写好两个类，用.className修改类名。
我这里有一个点击是否显示的例子。里面点击图片或者点击上级菜单时，有效果，你看下。
<div id="titlebg1"></div><div class="titlebg2" onmousemove="change(this)" onmouseout="change2(this)"><a href="#" onclick="openShutManager(this,'box')" ><img src="../images/zc1-1.jpg"  onmouseover="changeimg(this,'zc1',0)"  onmouseout="changeimg(this,'zc1',1)" /></a></div>
<div id="box"><div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div>    <div id="box_1"><div class="jibie3"><span class="selected3"><a href="#" >·级别3</a></span></div>
                    <div class="jibie3"><span class="unselected3"><a href="#" >·级别3</a></span></div>
                    <div class="jibie3"><span class="unselected3"><a href="#" >·级别3</a></span></div>    </div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    <div id="box_2" style="display:none;"><div class="jibie3"><span class="selected3"><a href="#" >·级别3</a></span></div>
                    <div class="jibie3"><span class="unselected3"><a href="#" >·级别3</a></span></div>
                    <div class="jibie3"><span class="unselected3"><a href="#" >·级别3</a></span></div>    </div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div><div class="titlebg2" onmousemove="change(this)" onmouseout="change2(this)"><a href="#" onclick="openShutManager(this,'box2',false)"><img src="../images/zc2.jpg"  onmouseover="changeimg(this,'zc2',0)"  onmouseout="changeimg(this,'zc2',1)" /></a></div><div id="box2" style="display:none"><div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div>
<div class="titlebg2"><a href="#"  onclick="openShutManager(this,'box3',false)"><img src="../images/zc3.jpg"  onmouseover="changeimg(this,'zc3',0)"  onmouseout="changeimg(this,'zc3',1)" /></a></div><div id="box3" style="display:none"><div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div><div class="titlebg2"><a href="#" onclick="openShutManager(this,'box4',false)"><img src="../images/zc4.jpg"  onmouseover="changeimg(this,'zc4',0)"  onmouseout="changeimg(this,'zc4',1)" /></a></div>
<div id="box4" style="display:none">
<div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div><div class="titlebg2"><a href="#" onclick="openShutManager(this,'box5',false)"><img src="../images/zc5.jpg"  onmouseover="changeimg(this,'zc5',0)"  onmouseout="changeimg(this,'zc5',1)" /></a></div>
<div id="box5" style="display:none">
<div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div>
<div class="titlebg2"><a href="#" onclick="openShutManager(this,'box6',false)"><img src="../images/zc6.jpg"  onmouseover="changeimg(this,'zc6',0)"  onmouseout="changeimg(this,'zc6',1)" /></a></div>
<div id="box6" style="display:none">
<div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div><div class="titlebg2"><a href="#" onclick="openShutManager(this,'box7',false)"><img src="../images/zc7.jpg"  onmouseover="changeimg(this,'zc7',0)"  onmouseout="changeimg(this,'zc7',1)" /></a></div>
<div id="box7" style="display:none">
<div class="jibie2"><span class="selected"><a href="#"  onclick="openShutManager(this,'box_1')" >预处理装置</a></span></div><div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_2')" >预处理装置</a></span></div>
    
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_3')" >预处理装置</a></span></div>
<div class="jibie2"><span class="unselected"><a href="#"  onclick="openShutManager(this,'box_4')" >预处理装置</a></span></div>
</div>
<script type="text/javascript">//===========================点击展开关闭效果====================================function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;var openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){   if(shutAble) return;   targetObj.style.display="none";   if(openTip && shutTip){    sourceObj.innerHTML = shutTip;    }} else {   targetObj.style.display="block";   if(openTip && shutTip){    sourceObj.innerHTML = openTip;    }}}</script><div id="lianxi"><img src="../images/lianxiwomen.gif" /></div>

Answer 2

感谢楼上的兄弟 不过不是我要的效果
我画了张效果图http://28mp.com/test/troubleshooter-front3.png 类似这样

Answer 3

参考：
http://www.tripwiremagazine.com/2010/12/20-awesome-jquery-powered-web-site-navigation-scripts.html

Answer 4

每级菜单用包上，可以用这段控制是否展开的效果。再添加一个当前选中的菜单的更改css类，可以实现。看看是这个效果不。<style>
.menu{
width:1000px;
height:700px;
margin:20px auto;
}
.category,.type,.problem{
width:300px;
height:680px;
float:left;
margin-right:6px;
}
.category_menu,.problemtype_menu,.problem_menu{
width:300px;
height:660px;
overflow:auto;
overflow-x:hidden;
}
.category_menu_selected,.problemtype_menu_selected,.problem_menu_selected
{
width:300px;
    height:660px;
    overflow:auto;
    overflow-x:hidden;
    background:red;
}
.category_menu div,
.problemtype_menu div,
.problem_menu div{
border:1px solid #000;
width:296px;
height:35px;
margin:6px 0;
line-height:35px;
}
</style>
<div id="content">
<div class="menu">
<div class="category">
<div>Choose category</div>
<div class="category_menu">
<div id="level1_1" onclick="openShutManager(1,this,'level2to1_1')"><a href="#">level2to1_1</a></div>
<div id="level1_2"><a href="#">1</a></div>
<div id="level1_3"><a href="#">1</a></div>
<div id="level1_4"><a href="#">1</a></div>
</div>
</div>
<div class="type">
<div>Choose problemtype</div>
<div class="problemtype_menu" id="level2to1_1" style="display:none">
<div id="level2_1"><a href="#">1</a></div>
<div id="level2_2" onclick="openShutManager(2,this,'level3to2_2')"><a href="#">level2_2</a></div>
<div id="level2_3"><a href="#">1</a></div>
</div>
</div>
<div class="problem">
<div>Choose problem</div>
<div class="problem_menu" id="level3to2_2" style="display:none">
<div id="level3_1"><a href="#">1</a></div>
<div id="level3_2"><a href="#">1</a></div>
<div id="level3_3"><a href="#">1</a></div>
<div id="level3_4"><a href="#">1</a></div>
<div id="level3_5"><a href="#">1</a></div>
<div id="level3_6"><a href="#">1</a></div>
</div>
</div>
</div>
</div><script>
</script>
<script type="text/javascript">//===========================点击展开关闭效果====================================    function openShutManager(level,oSourceObj, oTargetObj, shutAble, oOpenTip, oShutTip) {var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;var openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){   if(shutAble) return;   targetObj.style.display="none";   if(openTip && shutTip){    sourceObj.innerHTML = shutTip;    }   if (level == 1)
       sourceObj.className = "category_menu";
   else if (level == 2)
       sourceObj.className = "problemtype_menu";
   else if (level == 3)
       sourceObj.className = "problem_menu";} else {   targetObj.style.display="block";   if(openTip && shutTip){    sourceObj.innerHTML = openTip;    }
   if (level == 1)
       sourceObj.className = "category_menu_selected";
   else if (level == 2)
       sourceObj.className = "problemtype_menu_selected";
   else if (level == 3)
       sourceObj.className = "problem_menu_selected";}}</script>

Answer 5

匆忙写的，CSS没有在IE里面兼容，主要是子选择器那一块
首先你得包含一个JQ文件<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Inc/jquery.js"></script>
<title>三级菜单</title>
<style type="text/css">
#content>ul>li{
position:relative;
width:200px;
}
a{
display:block;
height:23px;
width:200px;
cursor:pointer;
border:1px solid #CCCCCC;
}
ul,li{
padding:0px;
margin:0px;
list-style:none;
line-height:25px;
}
ul>li>ul{
position:absolute;
top:0px;
display:none;
left:200px;
}
.sea{
background-color:#CCCCCC;
}
.seul{
display:block;
}
</style>
</head><body>
<div id="content">
<ul>
<li><a>1</a>
<ul>
<li><a>1-1</a>
<ul>
<li>1-1-1</li>
<li>1-1-2</li>
</ul>
</li>
<li><a>1-2</a>
<ul>
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li><a>2</a>
<ul>
<li><a>2-1</a>
<ul>
<li>2-1-1</li>
<li>2-1-2</li>
</ul>
</li>
<li><a>2-2</a>
<ul>
<li>2-2-1</li>
<li>2-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script language="javascript">
$(function(){
$("ul>li>a").click(function(){
$(this).parent().parent().find("li").find("a").removeClass("sea");
$(this).addClass("sea");
$(this).parent().parent().find("li").find("ul").removeClass("seul");
$(this).next().addClass("seul");
})
})
</script>
</body>
</html>

Answer 6

<style>
.menu{
width:1000px;
height:700px;
margin:20px auto;
}
.category,.type,.problem{
width:300px;
height:680px;
float:left;
margin-right:6px;
}
.category_menu,.problemtype_menu,.problem_menu{
width:300px;
height:660px;
overflow:auto;
overflow-x:hidden;
}
.category_menu_selected,.problemtype_menu_selected,.problem_menu_selected
{
width:300px;
    height:660px;
    overflow:auto;
    overflow-x:hidden;
    background:red;
}
.category_menu div,
.problemtype_menu div,
.problem_menu div{
border:1px solid #000;
width:296px;
height:35px;
margin:6px 0;
line-height:35px;
}
</style>
<div id="content">
<div class="menu">
<div class="category">
<div>Choose category</div>
<div class="category_menu">
<div id="level1_1" onclick="openShutManager(1,4,1,this,'level2to1_1')"><a href="#">level2to1_1</a></div>
<div id="level1_2" onclick="openShutManager(2,4,1,this,'level2to1_1')"><a href="#">1</a></div>
<div id="level1_3" onclick="openShutManager(3,4,1,this,'level2to1_1')"><a href="#">1</a></div>
<div id="level1_4" onclick="openShutManager(4,4,1,this,'level2to1_1')"><a href="#">1</a></div>
</div>
</div>
<div class="type">
<div>Choose problemtype</div>
<div class="problemtype_menu" id="level2to1_1" style="display:none">
<div id="level2_1"><a href="#">1</a></div>
<div id="level2_2" onclick="openShutManager(2,4,2,this,'level3to2_2')"><a href="#">level2_2</a></div>
<div id="level2_3"><a href="#">1</a></div>
</div>
</div>
<div class="problem">
<div>Choose problem</div>
<div class="problem_menu" id="level3to2_2" style="display:none">
<div id="level3_1"><a href="#">1</a></div>
<div id="level3_2"><a href="#">1</a></div>
<div id="level3_3"><a href="#">1</a></div>
<div id="level3_4"><a href="#">1</a></div>
<div id="level3_5"><a href="#">1</a></div>
<div id="level3_6"><a href="#">1</a></div>
</div>
</div>
</div>
</div><script>
</script>
<script type="text/javascript">//===========================点击展开关闭效果====================================    function openShutManager(curitem,allitemcount,level, oSourceObj, oTargetObj, shutAble, oOpenTip, oShutTip) {var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;var openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){   if(shutAble) return;   targetObj.style.display="none";   if(openTip && shutTip){    sourceObj.innerHTML = shutTip;    }   if (level == 1)
       sourceObj.className = "category_menu";
   else if (level == 2)
       sourceObj.className = "problemtype_menu";
   else if (level == 3)
       sourceObj.className = "problem_menu";} else {   targetObj.style.display="block";   if(openTip && shutTip){    sourceObj.innerHTML = openTip;    }
   if (level == 1)
       sourceObj.className = "category_menu_selected";
   else if (level == 2)
       sourceObj.className = "problemtype_menu_selected";
   else if (level == 3)
       sourceObj.className = "problem_menu_selected";}
//添加展开当前，收缩其他同级菜单功能
for (var i = 1; i <= allitemcount; i++) {
    if (i == curitem) {
        if (level == 1)
            document.getElementById('level' + level + '_' + i).className = "category_menu_selected";
        else if (level == 2)
            document.getElementById('level' + level + '_' + i).className = "problemtype_menu_selected";
        else if (level == 3)
            document.getElementById('level' + level + '_' + i).className = "problem_menu_selected";
    }
    else {
        if (level == 1)
            document.getElementById('level' + level + '_' + i).className = "category_menu";
        else if (level == 2)
            document.getElementById('level' + level + '_' + i).className = "problemtype_menu";
        else if (level == 3)
            document.getElementById('level' + level + '_' + i).className = "problem_menu";
    }
    
}
}</script>
在加了一下点击其他一级菜单，可以隐藏其他的二级菜单。具体的，你看着思路下一下吧。id需要系统的修改成符合你的需要的。

Answer 7

汗这还不简单？CSS代码改为：#content>ul>li{
width:200px;
}
#content{
position:relative;
}
a{
display:block;
height:23px;
width:200px;
cursor:pointer;
border:1px solid #CCCCCC;
}
ul,li{
padding:0px;
margin:0px;
list-style:none;
line-height:25px;
}
ul>li>ul{
position:absolute;
top:0px;
display:none;
left:200px;
}
.sea{
background-color:#CCCCCC;
}
.seul{
display:block;
}

Answer 8

我想问ul>li>ul是什么意思。。

Answer 9

CSS子选择器，表示选择UL下面的li下面UL元素，不过IE6不支持

Answer 10

#content>ul>li{
width:200px;
}
和#content ul li{
width:200px;
}
效果一样的吧？

Answer 11

你上面的情况下可能一样效果，我下面举个例子，你就知道意思<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子选择器</title>
<style type="text/css">
#content>ul>li>a{
color:#FF0000;
}
/*#content ul li a{
color:#FF0000;
}*/
</style>
</head><body>
<div id="content">
<ul>
<li><a>11111111111</a>
<ul>
<li><a>222222222</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>你可以分别试一下，加没加子选择器下情况，注意要在非IE6下看，你就明白了