<style>

 2 /*    css*/

 3     #body{

 4         float: left;

 5     }

 6     #xialakuang{

 7         background-color:#f9f9f9;

 8         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/

 9         display: none;

10     }

11     #body a{

12         display: block;

13         padding:10px 15px;

14         color: #C4C4C4;

15         line-height: 20px;

16         font-size: 12px;

17     }

18     #body a:link{

19         text-decoration: none;

20         background-color: black;

21     }

22     #body a:hover{

23         background-color:#3E3D3D;

24         color: white;

25     }33     .anniu{

34         background-color: black;

35         width: 108px;

36         height: 40px;

37         color: white;

38         border: none;

39         cursor: pointer;

40     }

41     #body:hover #xialakuang{

42         display: block;     /*鼠标放在div上时使下拉框显示，放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/

43     }

44     #body:hover .anniu{

45         background-color:#3E3D3D;

46     }

47 </style>

48 <body>

49     <div id="body">

50         <button class="anniu">移动下拉(css)</button>

51         <div id="xialakuang">

52             <a href="">菜单</a>

53             <a href="">菜单</a>

54             <a href="">菜单</a>

55             <a href="">菜单</a>

56             <a href="">菜单</a>

57             <a href="">菜单</a>

58         </div>

59     </div>

60 </body>

怎样用css写出一个下拉菜单的更多相关文章

  1. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  2. 一个用css写出来的下拉菜单

    1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...

  3. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  4. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  5. css用hover制作下拉菜单

    首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...

  6. swift 第九课 用tableview 做一个下拉菜单Menu

    写到这里的时候,自己这个项目已经完成了一半左右,项目进度自己还是挺满意.今天又有一个新的布局,要实现个下拉菜单,刚开始写的时候,觉得会很容易,后来发现也是小错不断, 我想自己限制的自己属于写博客的初期 ...

  7. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  8. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. css实现hover显示下拉菜单

    原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...

随机推荐

  1. Java设计模式--装饰器模式到Java IO 流

    装饰器模式 抽象构件角色:给出一个抽象接口,以规范准备接受附加责任的对象. 具体构件角色:定义准备接受附加责任的对象. 抽象装饰角色:持有一个构件对象的实例,并对应一个与抽象构件接口一致的接口. 具体 ...

  2. java异常和错误相关

    1.挺常见的一个问题,是个error java.lang.NoClassDefFoundError: 当目前执行的类已经编译,但是找不到它的定义时 也就是说你如果编译了一个类B,在类A中调用,编译完成 ...

  3. echarts 折线拐点收藏

    拐点的样式有:

  4. P4177 [CEOI2008]order 网络流，最小割，最大权闭合子图

    题目链接 \(Click\) \(Here\) 如果没有租用机器就是一个裸的最大权闭合子图.现在有了租用机器应该怎么办呢? 单独拆点是不行的,因为会和直接买下的情况脱离关系,租借是和连边直接相关的,那 ...

  5. Exp6 信息收集与漏洞扫描

    一.实践过程 1.信息收集 1.1 通过DNS和IP查询目标网站的信息 (1)whois命令用来进行域名注册信息查询,可查询到3R注册信息,包括注册人的姓名.组织和城市等信息. whois baidu ...

  6. Unity支持的跨平台

    Windows Mac OS X Web Browsers IOS android PlayStation 3 Xbox 360 Windows Store Windows Phone Linux B ...

  7. design language

    design language https://en.wikipedia.org/wiki/Design_language 设计语言(设计词汇)是一种超架构的方案和风格, 它用于指导产品组件或者架构配 ...

  8. 电梯系列——OO Unit2分析和总结

    一.摘要 本文是BUAA OO课程Unit2在课程讲授.三次作业完成.自测和互测时发现的问题,以及倾听别人的思路分享所引起个人的一些思考的总结性博客.主要包含设计策略.代码度量.BUG测试和心得体会等 ...

  9. Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

    技术架构: ​ 在Koa中应用Nunjucks,需要先把Nunjucks集成为符合Koa规格的中间件(Middleware),从本质上来讲,集成后的中间件的作用是给上下文对象绑定一个render(vi ...

  10. PMP知识点（四）——项目管理计划的内容

    项目管理计划([4.2制定项目管理计划]的输出) 包含三个基准和十三个子计划和一些其他内容 三个基准:成本基本.进度基准.范围基准 其中范围基准([5.4创建WBS]的输出)包含了:项目范围说明书.W ...