1 <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制作横排二级下拉菜单

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

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

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

  3. css用hover制作下拉菜单

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

  4. Css之导航栏下拉菜单

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

  5. 纯css和js版下拉菜单

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

  6. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

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

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

  8. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  9. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

随机推荐

  1. Haskell语言学习笔记（27）Endo, Dual, Foldable

    Endo Monoid newtype Endo a = Endo { appEndo :: a -> a } instance Monoid (Endo a) where mempty = E ...

  2. Linux iptables 备忘

    iptables主要通过存储在linux内核中的一个个表来控制IP包的.可以想象成excel表格.你可以自定义所需的iptables表.不过已经内置了三张队列表. filter 这是默认的表,包含了内 ...

  3. 全屏幕显示AVI

    uses Unit2; procedure TForm1.Button1Click(Sender: TObject);begin  Form2.Show;  Form2.WindowState := ...

  4. 1Java语言概述——重拾Java

    1.1 Java 语言诞生 Java 是1995 年 由 Sun公司开发的革命性编程语言. 1.2 Java 的特点 序号 主题 描述 1 简单 比C++简单 2 面向对象 基于对象的编程更符合人的思 ...

  5. MVC 发布到IIS中的配置方法

    MVC 发布到IIS中的配置方法  http://msdn.microsoft.com/zh-cn/library/gg703322(v=vs.98).aspx

  6. 自然对数e(转)

    e表示增长的极限 e=limx→+∞ (1+1/x)^x≍2.71828 假设,一根竹子,第一天是1米,第二天长了1米,然后这根柱子的长度变成了2米.相当于 (1+1/1)^1.上面这个假设,如果仔细 ...

  7. Python3 filter() 函数

    Python3 filter() 函数  Python3 内置函数 描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回一个迭代器对象,如果要转换为列表,可以使用 list() 来转 ...

  8. 运行 命令框不记录打过的命令,重启后CMD里面是空的.上次打过的命令消失了.

    问题: 常要用到PING命令.在cmd中输入ping 202.103.44.150 /t (这是当地的电信DNS) 用这个查看网络是不是正常.正常情况下次点开始运行的时候,运行命令框中应该 会有上次打 ...

  9. SQL日期和时间函数

    使用这些函数可以计算日期和时间值.例如,假设您希望了解通常在一周中哪一天的销售量最高.使用 DAYOFWEEK 函数,您可以创建一个公式来标识每天的销售订单数量.再比如,假设您希望比较在过去的一年中的 ...

  10. gis笔记 wms wfs等OGC标准

    WFS 和WMS的区别 WFS是基于地理要素级别的数据共享和数据操作,WFS规范定义了若干基于地理要素(Feature)级别的数据操作接口,并以 HTTP 作为分布式计算平台.通过 WFS服务,客户端 ...