首页 > 代码库 > 菜单下拉效果demo记录
菜单下拉效果demo记录
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">*{ margin:0px; padding:0px;}html,body{width:100%;height:100%;}.sub_item{display:none;height:60px;width:900px;float:left;position:absolute;top:30px;left:0px;height:100px;border:1px solid blue;padding:0px 0px 0px 0px;}#menu_list{width:900px;margin:0 auto;list-style-type:none;position:relative;}#menu_list .menu_item,#menu_list .menu_item .menu_item_text{float:left;line-height:30px;}#menu_list .menu_item{margin:0px 2px;border:1px solid red;}</style><script type="text/javascript"> function showItem(n,hide){ document.getElementById("sub_item_0"+n).style.display=(hide==true ? "inline" : "none"); }</script></head><body>
<!--zen coding ul[id="menu_list"]>li[ id="menu_item_0$" class="menu_item" onm ouseover="showItem($,true);" onm ouseout="showItem($,false);"]*8>span[class="menu_item_text"]{menu_0$}+div[id="sub_item_0$" class="sub_item"]{菜单子菜单$}--> <ul id="menu_list"> <li id="menu_item_01" class="menu_item" onm ouseover="showItem(1,true);" onm ouseout="showItem(1,false);"> <span class="menu_item_text">menu_01</span> <div id="sub_item_01" class="sub_item">菜单子菜单1</div> </li> <li id="menu_item_02" class="menu_item" onm ouseover="showItem(2,true);" onm ouseout="showItem(2,false);"> <span class="menu_item_text">menu_02</span> <div id="sub_item_02" class="sub_item">菜单子菜单2</div> </li> <li id="menu_item_03" class="menu_item" onm ouseover="showItem(3,true);" onm ouseout="showItem(3,false);"> <span class="menu_item_text">menu_03</span> <div id="sub_item_03" class="sub_item">菜单子菜单3</div> </li> <li id="menu_item_04" class="menu_item" onm ouseover="showItem(4,true);" onm ouseout="showItem(4,false);"> <span class="menu_item_text">menu_04</span> <div id="sub_item_04" class="sub_item">菜单子菜单4</div> </li> <li id="menu_item_05" class="menu_item" onm ouseover="showItem(5,true);" onm ouseout="showItem(5,false);"> <span class="menu_item_text">menu_05</span> <div id="sub_item_05" class="sub_item">菜单子菜单5</div> </li> <li id="menu_item_06" class="menu_item" onm ouseover="showItem(6,true);" onm ouseout="showItem(6,false);"> <span class="menu_item_text">menu_06</span> <div id="sub_item_06" class="sub_item">菜单子菜单6</div> </li> <li id="menu_item_07" class="menu_item" onm ouseover="showItem(7,true);" onm ouseout="showItem(7,false);"> <span class="menu_item_text">menu_07</span> <div id="sub_item_07" class="sub_item">菜单子菜单7</div> </li> <li id="menu_item_08" class="menu_item" onm ouseover="showItem(8,true);" onm ouseout="showItem(8,false);"> <span class="menu_item_text">menu_08</span> <div id="sub_item_08" class="sub_item">菜单子菜单8</div> </li> </ul></body></html>
菜单下拉效果demo记录
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。