body { font-family: "宋体"; font-size: 12px }
.menu { height: 30px; background: #e6e6e6; margin-left: 10px }
.menu a { text-decoration: none }
ul { margin: 0; padding: 0 }
.menu li { list-style: none; float: left; width: 90px; overflow: visible; cursor: pointer }
ul.level0 { height: 30px; overflow: visible }
ul.level1,ul.level2,ul.level3 { width: 90px; display: none }
ul.level2,ul.level3 { margin: -28px 0 0 90px }
ul.level0>li { height: 30px; line-height: 30px; text-align: center; background: #999 }
ul.level1>li,ul.level2>li,ul.level3>li { height: 28px; line-height: 28px; background: #bbb }
ul.level0>li:hover { background: #ccc }
ul.level1>li:hover,ul.level2>li:hover,ul.level3>li:hover { background: #ddd }
ul.level0>li.imyeah:hover>ul,ul.level1>li.imyeah:hover>ul,ul.level2>li.imyeah:hover>ul,ul.level3>li.imyeah:hover>ul { display: block }

bootstrip 折叠菜单的更多相关文章

  1. 滑动式折叠菜单 － Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  2. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  3. 顶 兼容各种浏览器js折叠菜单

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

  4. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  5. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  6. 20151225jquery学习笔记---折叠菜单UI

    折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一． 使用 accordion使用 acco ...

  7. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  8. dedecms模版制作活动的折叠菜单

    需要做成这种样式 url请求为这样: http://m03.com/plus/list.php?tid=19 这些菜单项都有对应的tid项,页面刷新后,应该将所有的菜单折叠起来,对于tid=19的菜单 ...

  9. JS+CSS打造三级折叠菜单，自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. Linux教学辅助训练（第二阶段）

    linux教学辅助训练(第二阶段) 标签(空格分隔):Linux辅助训练 ---更多资料点我查看 提示:本阶段性练习题是对<实战教学笔记>相应章节知识的归纳与扩展部分,必须要会,是面试前必 ...

  2. 使用navicat连接远程linux的mysql中文显示乱码的问题

    在navicat对应的连接上 右键->连接属性->高级 去掉使用mysql字符集 然后上面的编码选择 (65001)utf-8 接着打开连接  找到对应的数据库 右键  数据库属性 把编码 ...

  3. C# Volatile 类

    关于C#中Volatile类的具体信息,请访问MSDN: https://msdn.microsoft.com/en-us/library/system.threading.volatile(v=vs ...

  4. readonly属性在各浏览器中的区别

    有个项目需求是正常显示时为只读,不可修改: 点击修改按钮后,可修改表单元素. 首先想到的是readonly属性,其用于规定输入字段为只读,不能修改.在javascript中消除readonly值,可将 ...

  5. MIT线性代数课程 总结与理解-第一部分

    概述 个人认为线性代数从三个角度,或者说三个工具来阐述了线性关系,分别是: 向量 矩阵 空间 这三个工具有各自的一套方法,而彼此之间又存在这密切的联系,通过这些抽象出来的工具可以用来干一些实际的活,最 ...

  6. php dday1... web服务器的搭建 数据库的安装....

  7. 【Time系列四】查询各月份的日历

    荒废了两个星期没学java了,今天一心想突破"日历查询"这个小程序.先用比较简单的python实现下. 无奈天资愚钝,想了一个上午.最后卡在了日期排列的问题上,只好去参考下别人的代 ...

  8. moodle其他代码

    , $sectionnum=false, $strictness=IGNORE_MISSING):给课程模块一个id,找出coursemoudle的描述 get_coursemodule_from_i ...

  9. ssh框架的小实例（用户登录）

    刚学SSH框架写一个小实例,以便以后查看: 本案例简单的实现一个用户登录: 数据库方面就不写了,自己领悟吧!哈哈(根据user.hbm.xml文件就知道了) 我们一般可以创建下面几个包,什么意思呢,自 ...

  10. PHP控制连接打印机

    一.需求 使用PHP控制连接打印机 现场实时连续打印动态数据 二.配置 php运行环境正确安装(Apache|Nginx + PHP) 下载与php版本对应的php_printer.dll扩展 扩展文 ...