<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        #menu li {

            width: 80px;

            height: 30px;

            float: left;

            list-style-type: none;

            background-color: #CCCCCC;

            border: 1px solid #666666;

        }

        #menu a{

            display: block;

            width: 100%;

            height: 100%;

        }

        #menu ul li ul {

            display:none;

        }

        #menu ul li:hover ul{

            display:block;

            position: relative;

            z-index:1;

            top: 2px;

            left: -41px;

        }

    </style>

</head>

<body>

    <div id="menu">

        <ul>

            <li><a>菜单项</a></li>

            <li><a>菜单项</a></li>

            <li>

                <a>菜单项</a>

                <ul>

                    <li><a>子菜单项</a></li>

                    <li><a>子菜单项</a></li>

                </ul>

            </li>

        </ul>

        <h1>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h1>

    </div>

</body>

</html>

纯CSS弹出菜单（不支持IE6.0以下）的更多相关文章

  1. 纯CSS弹出层，城市切换效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

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

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

  3. 纯div+css制作的弹出菜单

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

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

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

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

  6. 布局分析002：入门级的CSS导航弹出菜单

    这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...

  7. css模仿微信弹出菜单

      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

  8. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  9. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

随机推荐

  1. StringIO和BytesIO

    1. StringIO 很多时候,数据读写不一定是文件,也可以在内存中读写. StringIO顾名思义就是在内存中读写str. 要把str写入StringIO,我们需要先创建一个StringIO,然后 ...

  2. mybatis generator maven插件自动生成代码

    如果你正为无聊Dao代码的编写感到苦恼,如果你正为怕一个单词拼错导致Dao操作失败而感到苦恼,那么就可以考虑一些Mybatis generator这个差价,它会帮我们自动生成代码,类似于Hiberna ...

  3. 【BZOJ 3754】Tree之最小方差树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3754 核心思想:暴力枚举所有可能的平均数,对每个平均数排序后Kruskal. 正确的答案一定是最小的 ...

  4. HTML5射击类游戏----【地球保卫战】

    在线DEMO地址:打开: 游戏截图:      就不贴代码了, 因为代码太多了, 大概写一下这个游戏实现思路和一些实现: 游戏一共有三关, 每一关都有一个大Boss, Boss比较好杀,主要各种外星飞 ...

  5. Codeforces 刷水记录

    Codeforces-566F 题目大意:给出一个有序数列a,这个数列中每两个数,如果满足一个数能整除另一个数,则这两个数中间是有一条边的,现在有这样的图,求最大联通子图. 题解:并不需要把图搞出来, ...

  6. C#基础练习

    1.冒泡排序 namespace _0 { class Program { public static int[] BubbleSort(int[] arr) { ; i < arr.Lengt ...

  7. github学习

    http://1ke.co/course/194 http://www.jianshu.com/p/0fce531dba31 http://www.liaoxuefeng.com/wiki/00137 ...

  8. c# 动态调用WCF方法笔记！

    //动态调用wcf方法 string url = "http://localhost:54379/ServiceWCF.svc"; IDoubleService proxy = W ...

  9. 记一次WinForm中屏蔽空格键对按钮的作用

    事件的起因是在做一个项目功能时,添加快捷键关闭声音,这个键最终选择了空格键,但是当按下空格键时,会把窗体中获取焦点的控件(比如按钮,文本框等)的单击事件触发,所以要屏蔽这个现象. 开始使用各种方法,在 ...

  10. 大神php摘录

    1. $rs = M('order')->where('id='.$res['id'])->save($order); )){ M('member')->where('id='.$m ...