<!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. 两种适用于中小量数据的mysql数据备份

    近来项目的业务量开始大了,感觉如果数据不周期性地备份一下,很可能会出现问题,虽然我每天都有阿里云的自动快照,上网找了一下方法,找到两种相对简单而又适合中小项目或者中小公司的数据备份策略,以下都是数据库 ...

  2. bzoj2243

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6753  Solved: 2496[Submit][Status ...

  3. coocs2d-x 分辨率

    config.lua: CC_DESIGN_RESOLUTION = { width = , height = , autoscale = "FIXED_HEIGHT", call ...

  4. 从点云到网格（二）VRIP介绍

    VRIP(Volumetric Range Image Processing),顾名思义,是从深度图重建网格的一种方法.VRIP是Brian Curless和Marc Levoy在1996年提出来的方 ...

  5. OBS MAC 系统开发（基于mac OS X 10.12）

    按照github 上的说明,安装配套软件,和跟踪需要的库 推荐使用homebrew 来安装各种依赖库. 安装Qt后,要配置系统变量 ,这个困扰本人很久:) 成功编译 cmake .. &&am ...

  6. iOS-RunLoop

    简单的说run loop是事件驱动的一个大循环,如下代码所示int main(int argc, char * argv[]) {     //程序一直运行状态     while (AppIsRun ...

  7. Windows API Hooking in Python

    catalogue . 相关基础知识 . Deviare API Hook Overview . 使用ctypes调用Windows API . pydbg . winappdbg . dll inj ...

  8. 无限制使用ppt转pdf功能

    https://smallpdf.com/cn是一个pdf处理网站,十分好用,可是非注册用户有很多限制,比如用两次ppt转pdf就要等待: 于是就想如何让服务器认为我没有用过这个功能呢,感觉应该是用c ...

  9. FineUI配置文件

    <configuration> <configSections> <section name="FineUI" type="FineUI.C ...

  10. Oracle创建自增ID

    先创建序列sequence create sequence S_User minvalue 1 nomaxvalue  -- 或 maxvalue 999 start with 1 increment ...