标签:style blog http io ar color os sp java
<!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" onmouseover="showItem($,true);" onmouseout="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" onmouseover="showItem(1,true);" onmouseout="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" onmouseover="showItem(2,true);" onmouseout="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" onmouseover="showItem(3,true);" onmouseout="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" onmouseover="showItem(4,true);" onmouseout="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" onmouseover="showItem(5,true);" onmouseout="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" onmouseover="showItem(6,true);" onmouseout="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" onmouseover="showItem(7,true);" onmouseout="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" onmouseover="showItem(8,true);" onmouseout="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>
标签:style blog http io ar color os sp java
原文地址:http://www.cnblogs.com/yeminglong/p/4129499.html