• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS下拉菜单简单制作教程

CSS下拉菜单简单制作教程

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,下拉菜单等相关知识,佚名 希望在学习及工作中可以帮助到您

本文实例为大家分享了CSS下拉菜单的具体实现代码,供大家参考,具体内容如下

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>下拉菜单实例|菜鸟教程(runoob.com)</title>  
  5.   <meta charset="utf-8">  
  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>   

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持微课江湖。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css sprite 技术学习
  • 2017-08-06网站变灰色兼容代码 包括图片 支持所有浏览器
  • 2017-08-06创建超链接及css 样式设置
  • 2017-08-06并排的两个对象如何水平对齐兼容ie6
  • 2017-08-06css页面左中右分栏布局示例
  • 2017-08-06css 块状元素和内联元素
  • 2017-08-06Discuzx系统 CSS 编码规范、CSS属性书写顺序
  • 2017-08-06CSS中右对齐float:right换行的解决办法
  • 2017-08-06IE中css样式设置height无效的解决方法
  • 2017-08-06纯css3实现照片墙效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 通过绝对定位实现div重叠实例代码
    • div ,frame等空间的透明实现代码
    • CSS 群组化选择符
    • CSS3模拟动画下拉菜单效果
    • DIV+CSS常见问题的14条原因分析
    • css3 线性渐变和径向渐变示例附图
    • HTML meta content 提供页面信息代码
    • Win7下Chrome字体渲染颜色太淡颜色不够黑的解决方法
    • CSS中的盒子相关属性,盒子到底有多大
    • css选择符类型详细介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有