精简版二级下拉菜单，响应鼠标显示

发布时间：2018-09-20 14:42:33 所属栏目：政策来源：站长网

导读：精简版的二级下拉导航菜单，响应鼠标的动作，鼠标放上即显示出菜单，常见的一种菜单样式。在没有经过美化的情况下，是很难看的，如果您有需要，就用心修改一下，美化一番，还是不错的菜单哦！示例： htmlheadtitle二级菜单，响应鼠标/titlestyle type=tex

　　精简版的二级下拉导航菜单，响应鼠标的动作，鼠标放上即显示出菜单，常见的一种菜单样式。在没有经过美化的情况下，是很难看的，如果您有需要，就用心修改一下，美化一番，还是不错的菜单哦！

　　示例：

<html> <head> <title>二级菜单，响应鼠标</title> <style type="text/css"> .mainNav ul li {float: left;width: 150px;} .mainNav li ul {display: none;} li.hover ul {display: block;} </style> <script language="javascript" type="text/javascript"> function showSubLevel(Obj){ Obj.className="hover"; } function hideSubLevel(Obj){ Obj.className=""; } </script> </head> <body> <div class="mainNav"> <ul> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目A <ul> <li>A的二级栏目</li> <li>A的二级栏目</li> <li>A的二级栏目</li> </ul> </li> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目B <ul> <li>B的二级栏目</li> <li>B的二级栏目</li> <li>B的二级栏目</li> </ul> </li> <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"> 一级栏目C <ul> <li>B的二级栏目</li> <li>B的二级栏目</li> <li>B的二级栏目</li> </ul> </li> </ul> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!