1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. ul{
  8. list-style: none;
  9. float: left;
  10. }
  11. li{
  12. display: none;
  13. }
  15. </style>
  16. <script type="text/javascript">
  17. function disp(){
  18. for(var i = 0; i<3; i++){
  19. document.getElementsByClassName('sss')[i].style.display='block';
  20. }
  22. }
  23. function out(){
  24. for(var i = 0; i<3; i++){
  25. document.getElementsByClassName('sss')[i].style.display='none';
  26. }
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <ul onmouseover="disp()" onmouseout="out()"> 手机数码
  32. <li class="sss">iPhone</li>
  33. <li class="sss">SAMSUNG</li>
  34. <li class="sss">SAMSUNG</li>
  35. </ul>
  36. </body>
  37. </html>
 
方法二
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. li:hover #b{
  8. display: block;
  9. }
  10. #b{
  11. display: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>sss
  18. <ul id="b">
  19. <li ></li>
  20. <li ></li>
  21. <li ></li>
  22. <li ></li>
  23. </ul>
  24. </li>
  25. </ul>
  26. </body>
  27. </html>

Html中鼠标悬停显示二级菜单的两种方法的更多相关文章

  1. Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  2. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  3. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. 【转】oracle 中随机取一条记录的两种方法

    oracle 中随机取一条记录的两种方法 V_COUNT INT:=0; V_NUM INT :=0; 1:TBL_MYTABLE 表中要有一个值连续且唯一的列FID BEGIN SELECT COU ...

  6. 在PHP代码中处理JSON 格式的字符串的两种方法：

    总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...

  7. HTML中禁用表单控件的两种方法readonly与disabled

    时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的,下面与大家分享下禁用表中控件的两种方法 在网页的制作过程中,我们会经常使用到表单.但是有时候我 ...

  8. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  9. AutoCAD.NET二次开发：创建自定义菜单的两种方法比较

    目前我已经掌握的创建CAD菜单方法有两种: COM方式: http://www.cnblogs.com/bomb12138/p/3607929.html CUI方式: http://www.cnblo ...

随机推荐

  1. Alpha阶段第四次Scrum Meeting

    情况简述 Alpha阶段第四次Scrum Meeting 敏捷开发起始时间 2016/10/25 00:00 敏捷开发终止时间 2016/10/26 00:00 会议基本内容摘要 做出了将网络通讯接口 ...

  2. FMDB 数据库

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  3. RedHat的定制安装

    1.前提是先安装好VMware,接着打开VMware软件,选择新进虚拟机.选择Custom 2.选择iso --使用镜像文件安装. 3.选择操作系统和版本. 4.给产生的配置的文件给放在你新建的文件夹 ...

  4. 《Python核心编程》18.多线程编程（三）

    18.6使用threading模块 #!/usr/bin/env python # -*- coding:utf-8 -*- """从Thread类中派生出一个子例,创建 ...

  5. Fedora 24 Gnome Boxes 无法ping通网络

    安装Fedora 24在试用虚拟机时发现无法ping通外网. 我傻傻地以为是软件问题. 问题描述: 尝试ping程序来测试网络连通性: (我之前也是ping百度,后来在为了少打字百度了一些比较短的域名 ...

  6. Texstudio中文乱码问题

    参考 http://blog.csdn.net/lanbing510/article/details/8723619 1. 用XeLatex编译,这样生成的pdf没有乱码 2.在texstudio中E ...

  7. MYSQL提权方法

    cve-2016-6662 MYSQL提权分析 MySQL <= 5.7.15 远程代码执行/ 提权 (0day) 5.6.33 5.5.52 Mysql分支的版本也受影响,包括: MariaD ...

  8. Spring task定时任务

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. 界面通信之block传值

    block传值有两种方式 ⽅式⼀: 使⽤block属性实现回调传值 ⽅式⼆: 在⽅法中定义block实现回调传值 方式一比较便于理解而且常用,下面介绍方式一是如何传值的 使用block属性传值和代理传 ...

  10. Windows下安装MongoDB

    项目当中用到MongoDB最为NoSQL数据库,运行的平台为 Windows Server 2008,下面是MongoDB的安装过程笔记: 1.下载软件 官方下载地址:http://www.mongo ...