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. IDC机房线路质量测试方案

    1.测试节点: 北京:123.206.*.* 上海:139.196.*.* 广州:119.29.*.* 汕头:125.91.*.* 香港:103.20.*.* 美国:198.52.*.* 测试服务器: ...

  2. linux下重启apache

    基本的操作方法: 本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令: 推荐/usr/local/apache2/bin/apachec ...

  3. [Head First设计模式]策略模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  4. 【Bootstrap】Bootstrap-select多选下拉框实现

    目录 前言 需要引用的它们 核心选项 核心方法 实例应用 回到顶部 前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomor ...

  5. Jenkins的使用

    参考: http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.html

  6. html5新增标签及兼容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  8. 我常用的Vi命令

    Vi对于linux的重要性和受欢迎的程度在此一律不表.此刻互联网上不少介绍vi的文章和博客,相信写得比我好的也不在少数.然而为什么我依然写这样一篇文章呢?我对linux知识和了解也都来自于互联网,很难 ...

  9. linux 使用 nvidia 的 gpu

    第一种方法: [Wizard@Wizard ~]$ nvidia-detect kmod-nvidiaOptimus hardware detected: An Intel display contr ...

  10. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...