Html中鼠标悬停显示二级菜单的两种方法

时间:2021-10-17 05:40:31
  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. }
  14. </style>
  15. <script type="text/javascript">
  16. function disp(){
  17. for(var i = 0; i<3; i++){
  18. document.getElementsByClassName('sss')[i].style.display='block';
  19. }
  20. }
  21. function out(){
  22. for(var i = 0; i<3; i++){
  23. document.getElementsByClassName('sss')[i].style.display='none';
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <ul onmouseover="disp()" onmouseout="out()"> 手机数码
  30. <li class="sss">iPhone</li>
  31. <li class="sss">SAMSUNG</li>
  32. <li class="sss">SAMSUNG</li>
  33. </ul>
  34. </body>
  35. </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>