1，竖向下拉菜单 鼠标单击打开 再打击关闭
<style>
*{ margin:0px auto; padding:0px;}
div{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}
#biao{ cursor:pointer;}
li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }
</style>
</head>
<body>
<div id="biao" onclick="biao(1)">标题1</div>
<ul id="nei1" style=" display:none;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<div id="biao" onclick="biao(2)">标题2</div>
<ul id="nei2" style=" display:none;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<div id="biao" onclick="biao(3)">标题3</div>
<ul id="nei3" style=" display:none;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</body>
</html>
<script>
function biao(n)
{
if(document.getElementById("nei"+n).style.display=="none")
{
document.getElementById("nei"+n).style.display="block";
}
else{
document.getElementById("nei"+n).style.display="none";
}
}
</script>
2.横向下拉菜单 鼠标放上显示 鼠标移开 关闭
<style>
*{ margin:0px auto; padding:0px;}
#aa{ width:100px; height:125px; float:left}
#biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}
#biao{ cursor:pointer;}
#nei1{ display:none;}
#nei2{ display:none;}
#nei3{ display:none;}
#nei4{ display:none;}
#nei5{ display:none;}
li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }
</style>
</head>
<body>
<div id="aa">
<div id="biao" onmouseover="biao(1)" onmouseout="biao1(1)">标题1</div>
<ul id="nei1">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<div id="aa">
<div id="biao" onmouseover="biao(2)" onmouseout="biao1(2)">标题2</div>
<ul id="nei2">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<div id="aa">
<div id="biao" onmouseover="biao(3)" onmouseout="biao1(3)">标题3</div>
<ul id="nei3">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<div id="aa">
<div id="biao" onmouseover="biao(4)" onmouseout="biao1(4)">标题4</div>
<ul id="nei4">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
<div id="aa">
<div id="biao" onmouseover="biao(5)" onmouseout="biao1(5)">标题5</div>
<ul id="nei5">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</body>
</html>
<script>
function biao(n)
{
document.getElementById("nei"+n).style.display="block";
}
function biao1(n)
{
document.getElementById("nei"+n).style.display="none";
}
</script>
时间： 2024-11-06 21:06:33