js+css控制鼠标移过显示隐藏菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>head</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-CN" /><style>body { text-align: center; background: #FFF; font: 12px Tahoma, sans-serif; color: #000;}img { border: 0;}ul,li { list-style:none;}* { margin: 0; padding: 0;}.clear { clear: both; margin: 0 auto; display: block; font: 0/0 sans-serif; height: 3px;}.head { margin: 0 auto; width: 760px;}.headl { width: 10px; float: left;}.headr { width: 750px; float: right; padding: 8px 0 0 0;}.headt { padding-top: 8px; font-size: 14px;}.head li { display: inline;}.head li a { background: #E9F2FF; border: 1px solid #CCC; padding: 2px 15px;}.head li a:hover { background: #B3D3FF; text-decoration: none; color: #D30102;}</style></head><body><script type="text/javascript">function fetch_object(idname){ var my_obj = document.getElementById(idname); return my_obj;}function toggle_nav(obj){ for (i = 1; i<= 9; i++ ) {var sub_nav = fetch_object("sub_nav_" + i);var sub_nav_index = fetch_object("sub_nav_0");sub_nav_index.style.display = "none";if (obj == i){ sub_nav.style.display = "block";}else{ sub_nav.style.display = "none";} }}</script><div class="head"> <div class="headl"><a href="/"></a></div> <div class="headr"> <ul> <li ><a href="/">大栏目1</a></li> <li ><a href="/">大栏目2</a></li> <li ><a href="/">大栏目3</a></li> <li ><a href="/">大栏目4</a></li> <li ><a href="/">大栏目5</a></li> <li ><a href="/">大栏目6</a></li> <li ><a href="/">大栏目7</a></li> <li ><a href="/">大栏目8</a></li> <li ><a href="/">大栏目9</a></li> </ul> <div class="clear"></div> <div id="sub_nav_0" class="headt" style="display:block">欢迎语</div> <div id="sub_nav_1" class="headt" style="display:none"> <a href="/">小栏目1</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_2" class="headt" style="display:none"> <a href="/">小栏目2</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_3" class="headt" style="display:none"> <a href="/">小栏目3</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_4" class="headt" style="display:none"> <a href="/">小栏目4</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_5" class="headt" style="display:none"> <a href="/">小栏目5</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_6" class="headt" style="display:none"> <a href="/">小栏目6</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_7" class="headt" style="display:none"> <a href="/">小栏目7</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_8" class="headt" style="display:none"> <a href="/">小栏目8</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_9" class="headt" style="display:none"> <a href="/">小栏目9</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> </div></div><div class="clear"></div></body></html>对于少量的div只需每次循环判断
页:
[1]