TA貢獻(xiàn)24條經(jīng)驗(yàn) 獲得超44個(gè)贊
用無(wú)序列表或者有序列表進(jìn)行嵌套然后配套一下css就可以實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單實(shí)現(xiàn)的代碼，沒(méi)有嚴(yán)謹(jǐn)?shù)目紤]兼容性，大概看一下把。望采納
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
<title>demo</title>
<link?rel="stylesheet"?href="">
<style>
ul>li>ul{
display:none;
}
ul>li>ul.on{
display:block;
}
</style>
<script>
window.onload=function(){
var?menu=document.getElementById("menu");
var?cls=menu.getElementsByClassName("first");
menu.onclick=function(e){
var?e=e||window.event;
var?target=e.target||e.srcElement;
if(target.className=="first"){
if(target.children[0].className=="on"){
target.children[0].className="";
}else{
for(var?i=0;i<cls.length;i++){
cls[i].children[0].className="";
}
target.children[0].className="on";
}
}
}
}
</script>
</head>
<body>
<ul?id="menu">
<li?class="first">一級(jí)菜單
<ul?class="on">
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li?class="first">一級(jí)菜單
<ul>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li?class="first">一級(jí)菜單
<ul>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li?class="first">一級(jí)菜單
<ul>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
<li?class="first">一級(jí)菜單
<ul>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
<li>二級(jí)菜單</li>
</ul>
</li>
</ul>
</body>
</html>
TA貢獻(xiàn)3593條經(jīng)驗(yàn) 獲得超1個(gè)贊
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超2個(gè)贊
你想說(shuō)的是這樣的？table、forms、widgets都是一級(jí)菜單，當(dāng)我點(diǎn)擊forms時(shí)會(huì)顯示它下面的二級(jí)菜單，并且widgets會(huì)向下移動(dòng)，然后再點(diǎn)擊一下forms時(shí)二級(jí)菜單會(huì)收起來(lái)，并且widgets會(huì)向上移動(dòng)然后變成圖一的樣子？
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
這個(gè)要看你html的功力了，其實(shí)很簡(jiǎn)單，把二級(jí)菜單放在?前菜單的以下菜單 前面，二級(jí)菜單顯示，自然就把?前菜單的以下菜單 撐下去了
舉報(bào)