1. <style>
  2.  2 /*    css*/
  3.  3     #body{
  4.  4         float: left;
  5.  5     }
  6.  6     #xialakuang{
  7.  7         background-color:#f9f9f9;
  8.  8         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
  9.  9         display: none;
  10. 10     }
  11. 11     #body a{
  12. 12         display: block;
  13. 13         padding:10px 15px;
  14. 14         color: #C4C4C4;
  15. 15         line-height: 20px;
  16. 16         font-size: 12px;
  17. 17     }
  18. 18     #body a:link{
  19. 19         text-decoration: none;
  20. 20         background-color: black;
  21. 21     }
  22. 22     #body a:hover{
  23. 23         background-color:#3E3D3D;
  24. 24         color: white;
  25. 25     }33     .anniu{
  26. 34         background-color: black;
  27. 35         width: 108px;
  28. 36         height: 40px;
  29. 37         color: white;
  30. 38         border: none;
  31. 39         cursor: pointer;
  32. 40     }
  33. 41     #body:hover #xialakuang{
  34. 42         display: block;     /*鼠标放在div上时使下拉框显示，放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
  35. 43     }
  36. 44     #body:hover .anniu{
  37. 45         background-color:#3E3D3D;
  38. 46     }
  39. 47 </style>
  40. 48 <body>
  41. 49     <div id="body">
  42. 50         <button class="anniu">移动下拉(css)</button>
  43. 51         <div id="xialakuang">
  44. 52             <a href="">菜单</a>
  45. 53             <a href="">菜单</a>
  46. 54             <a href="">菜单</a>
  47. 55             <a href="">菜单</a>
  48. 56             <a href="">菜单</a>
  49. 57             <a href="">菜单</a>
  50. 58         </div>
  51. 59     </div>
  52. 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. django rest framework pagination

    REST framework 包含对可定制分页样式的支持.这使你可以将较大的结果集分成单独的数据页面. 分页 API 支持: 以分页链接的形式作为响应内容的一部分. 以分页链接的形式包含在响应的 he ...

  2. P1417 烹调方案 (0/1背包+贪心)

    题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船飞到一半,gw发现了一个很严重的问题:肚子饿了~ gw还是会做饭的,于是拿出了储藏的 ...

  3. Django websocket 长连接使用

    下载  pip install dwebsocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客 ...

  4. 可变字符串类 StringBuilder

    string类创建的字符串是不可变的(同一内存中),每更改一次,就会新开辟内存,不利于高效频繁操作. 当频繁操作同一字符串变量时,建议使用StringBuilder. 可变字符串类StringBuil ...

  5. 限流redis+lua

    限流==保险丝策略,可借助框架如spring cloud中Hystrix组件实现.今天介绍使用guava RateLimiter 类实现接口限流. 比如12306抢票: https://blog.cs ...

  6. [Bzoj 2956] 模积和 (整除分块)

    整除分块 一般形式:\(\sum_{i = 1}^n \lfloor \frac{n}{i} \rfloor * f(i)\). 需要一种高效求得函数 \(f(i)\) 的前缀和的方法,比如等差等比数 ...

  7. sigaction 的使用

    linux内核会发射一些信号,应用程序可以捕捉信号执行特定函数 :失败:-,设置errno act:传入参数,新的处理方式.oldact:传出参数,旧的处理方式. struct sigaction结构 ...

  8. 20175209 《Java程序设计》第九周学习总结

    20175209 <Java程序设计>第九周学习总结 一.教材知识点总结 有关数据库下载中存在可能出现的问题已经在博客<数据库安装和使用过程中出现的一些问题>给出了相应的解决办 ...

  9. Tomcat系列(9)——Tomcat 6方面调优（内存，线程，IO，压缩，缓存，集群）

    核心部分 内存 线程 IO 压缩 缓存 集群 一.JVM内存优化 Tomcat内存优化,包括内存大小,垃圾回收策略. Windows 下的catalina.bat,Linux 下的catalina.s ...

  10. node服务端口被占用Error listen EADDRINUSE :::3000

    Error: listen EADDRINUSE: address already in use :::3000,出现这个报错说明3000端口被占用 解决方法:找到占用该端口的程序,kill杀掉它就可 ...