标签：line get height 分享 list 内容 point 鼠标 nbsp
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>
标签：line get height 分享 list 内容 point 鼠标 nbsp
原文地址：http://www.cnblogs.com/xingyue1988/p/6052749.html
