CSS往下拉菜单简易制做实例教程

日期：2021-03-03 类型：科技新闻 

关键词：网页设计，移动端网页设计，大一网页设计作业成品，网页编辑软件，网页在线编辑

本文案例为大伙儿共享了CSS往下拉菜单的实际完成编码，供大伙儿参照，实际內容以下

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>往下拉菜单案例|菜鸟实例教程(runoob.com)</title>  
  5.   <meta charset="utf⑻">  
  6.   <style>  
  7.   .dropdown {   
  8.       position: relative;   
  9.       display: inline-block;   
  10.   }   
  11.   .dropdown-content {   
  12.       display: none;   
  13.       position: absolute;   
  14.       background-color: #f9f9f9;   
  15.       min-width: 160px;   
  16.       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
  17.       padding: 12px 16px;   
  18.   }   
  19.   .dropdown:hover .dropdown-content {   
  20.       display: block;   
  21.   }   
  22.   </style>  
  23. </head>  
  24. <body>  
  25. <h2>电脑鼠标挪动后出現往下拉菜单</h2>  
  26. <p>将电脑鼠标挪动到特定元素上就可以看到往下拉菜单。</p>  
  27. <div class="dropdown">  
  28.   <span>电脑鼠标挪动到我这！</span>  
  29.   <div class="dropdown-content">  
  30.     <p>菜鸟实例教程</p>  
  31.     <p>www.runoob.com</p>  
  32.   </div>  
  33. </div>  
  34. </body>  
  35. </html>   

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS3完成多情况仿真模拟动态性边框的实际效果 返回下一篇：没有了