<style>

　　html, body {
　　　　margin: 0;
　　　　padding: 0;
　　}

　　.btn-group{
　　　　font-size: 14px;
　　　　position: relative;
　　}

　　.open>.dropdown-menu{
　　　　display: block;
　　}

　　.btn{
　　　　padding: 10px 30px;
　　　　border: 1px #E8940B solid;
　　　　background: #f1f1f1;
　　}

　　.dropdown-menu{
　　　　position: absolute;
　　　　left: 0;
　　　　z-index:1000;
　　　　display: none;
　　　　min-width: 160px;
　　　　padding: 5px 0px;
　　　　margin: 5px 0px;
　　　　border: 1px #438FF5 solid;
　　　　text-align: center;
　　　　list-style: none;
　　　　background: white;
　　}

　　.dropdown-menu>li{
　　　　line-height:35px;
　　　　white-space:nowrap;
　　}

</style>

<body>

　　<div class="btn-group open">
　　　　<button class="btn btn-toggle">按钮</button>
　　　　<ul class="dropdown-menu">
　　　　　　<li>上海上海1</li>
　　　　　　<li>中国中国2</li>
　　　　　　<li>哈尔冰3</li>
　　　　　　<li>生日快乐4</li>
　　　　　　<li>节日快乐5</li>
　　　　</ul>
　　</div>

</body>

“div+css”下拉菜单的更多相关文章

  1. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  4. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  5. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  6. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  7. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  8. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

  9. [CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

随机推荐

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. 10 Symbol

    Symbol 书中讲了2部分. Symbol() Symbol 属性值. 完全两种画风的东西. 1. Symbol 首先他是一种全新的值. 不属于以前的任何一种 ES6引入了一种新的原始数据类型Sym ...

  3. iMac 升级到10.12后，蓝牙不能用

    解决办法: 断开所有外接USB包括,自带的与Magic Keyboard连接那根线. 再重新启动,就好了. 引用:http://www.jianshu.com/p/87e25a072623

  4. temp

    netstat -tlnap lsof -i :40735 ps -ef|grep 10259 iftop iptraf nethogs gidxylxhqp http://blog.csdn.net ...

  5. 使用 Weinre 调试移动网站及 PhoneGap 应用

    在 PC 端,我们可以使用 Firebug 或者 Chrome 开发人员工具方便的调试网站或者 Web 应用.但是,当我们想在移动端调试站点或者应用的时候,这些工具就派不上用场了.因此,移动开发人员都 ...

  6. Ubuntu Server 12.04下部署glusterfs

    1.安装环境 Linux:Ubuntuserver 12.04.1 LTS 64bit 2台 分布式文件系统:Gluster 测试环境:一台作文件服务器端(192.168.56.133),一台作客户端 ...

  7. Mysql字符转义

    在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' 单引号('''). \" 双 ...

  8. 读取图像，LUT以及计算耗时

    使用LUT(lookup table)检索表的方法,提高color reduce时对像素读取的速度. 实现对Mat对象中数据的读取,并计算color reduce的速度. 方法一:使用Mat的ptr( ...

  9. ThinkPHP3.2.3多文件上传，文件丢失问题的解决

    描述 thinkphp多文件上传时,有些时候会出现文件丢失的情况.比如上传多个图片,最终只上传了一个图片.本地测试的时候是正常的,但上传到服务器上就会出现丢失文件这种情况. 原因 查看tp上传类(Th ...

  10. MVC中使用Entity Framework 基于方法的查询学习笔记 （三）

    紧接上文,我们已经学习了MVC数据上下文中两个常用的类,这两个类承载着利用函数方式进行数据查询的全部内容,我们既然已经了解了DbSet<TEntity> 是一个泛型集合,并且实现了一些接口 ...