<!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. ［网站性能3］SqlServer中Profiler的使用

    原文链接:http://www.cnblogs.com/caishuhua226/p/3838060.html   http://www.cnblogs.com/lyhabc/articles/294 ...

  2. Android开发之应用程序的安装

    这里介绍的是用XUtils下载apk文件,然后进行安装. 首先用HttpUtils下载文件(记得获取SD卡的读写权限和联网的权限): /** * 下载Apk */ private void downL ...

  3. QQ传输协议分析

    2015-06-16 16:27:07 一. 实验目的: 在虚拟机下NAT模式下通过Wireshark抓包,分析QQ的传输模式.了解QQ在传输信息过程中用到的协议.分析在Nat模式下,信息传输的穿透性 ...

  4. java的字符串截取

    import java.util.Date; import java.text.SimpleDateFormat; Date now = new Date(); def portcodes = new ...

  5. 报错：MySQL check the manual that corresponds to your MySQL server version for the right syntax

    今天在向MySQL中插入数据时,报了标题的错误,因为我用的是session.save(object)方法,后台打印出的object和sql语句都没有问题,后来在网上查询,发现http://blog.c ...

  6. Uncaught SyntaxError: Invalid or unexpected token

    出现错误的地方:在Jquery中,调用有参数的方法,动态传递参数时报错 出现错误的原因: 动态传递参数的时候,参数中有换行符 错误的解决:参数传递之前,将换行符替换 var  temp = model ...

  7. Python为8bit深度图像应用color map

    图片中存在着色版的概念,二维矩阵的每个元素的值指定了一种颜色,因此可以显示出彩色. 迁移调色板 下述python代码将VOC数据集中的某个语义分割的图片的调色板直接应用在一个二维矩阵代表的图像上 #l ...

  8. CSS3 border-image 属性

    border-image 属性是一个简写属性,用于设置以下属性: border-image-source 用在边框的图片的路径,默认值none. 如:border-image-source:url(b ...

  9. Yii2.0 对的一些简单的操作

    1: 此方法返回 ['name' => 'daxia'] 的所有数据: User::find()->where(['name' => 'daxia'])->all(); 2: ...

  10. js删除数组指定元素

    删除js数组中制定的元素,这里用到了jquery. var a = new Array("a","b","cc","d3" ...