<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. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. web前端基础知识-（四）DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  3. Dell R730 配置完RAID后装系统找不到硬盘。

    1. 各硬盘只是灯都正常.硬件无故障. 2. 8个600G硬盘做的RAID0和RAID5后都在装系统选盘处找不到硬盘.(注意: 第一次做raid 时,没有进行初始化init.后补做也无效,一直复现这个 ...

  4. href，src，url 整理

    一.href 和 src 的定义及区别 href:Hypertext Reference(超文本引用),指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接 ...

  5. Make 命令教程

    http://www.ruanyifeng.com/blog/2015/02/make.html 作者: 阮一峰 日期: 2015年2月20日 代码变成可执行文件,叫做编译(compile):先编译这 ...

  6. apache_commons 之 双向Map DualHashBidiMap （使用及源码）

    在项目当中,经常出现需要根据Key值获取value:而且要求根据value获取key值,其实在commons-collections包中已经提供了此集合类.就是DualHashBidiMap类. (官 ...

  7. 9Spring进阶----青软S2SH(笔记)

  8. 解决Myeclipse PermGen space问题

    myeclipse配置web服务器配置 Window—Preferences—Myeclipse—Servers—tomcat JDK的Optional Java VM arguments配置为:-X ...

  9. tfs连不上团队资源管理器问题

    这个问题主要原因是因电脑装了vs2008又装了vs2012,因为版本不一样,所以只需要将VersionControl.config这个文件删除掉就可以了.文件路径C:\Users\Administra ...

  10. IE7 自动为文件路径添加域名

    对于图片等文件的路径,一般在同一个域名下的文件都会使用相对路径,但如果使用JS获取文件的路径浏览器获取到的路径都是相对路径,但IE7会自动为路径添加域名变成绝对路径... IE7下图片路径,在文件相对 ...