<!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. java日志学习笔记

    一．日志家族 Log4j一开始就很强大,在jdk自带日志系统之前,apache就曾经尝试把log4j划为java的一部分,不知为何没能成功,sun还是用了自己很弱的日志系统.为了兼容各个日志系统,ap ...

  2. 【MySQL】mysql workbench

    1.导入,导出,数据之间的传输[两台服务器]2.连接管理3.服务器管理4.表的管理

  3. Java处理 文件复制

    try { InputStream in = new FileInputStream(new File(oldPath)); OutputStream out = new FileOutputStre ...

  4. 安装cocoapods

    1. 看一下ruby的版本 ruby -v 2. 删除默认源 gem sources --remove https://rubygems.org/ 3. 添加淘宝源 gem sources -a ht ...

  5. How to Disable Strict SQL Mode in MySQL 5.7

    If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...

  6. vs中使用git

    vs中使用git 一.概念 Git是一个强调速度的分布式版本控制软件和源代码管理系统(SCM,source code management).Git最初是由Linus Torvalds为内核开发而设计 ...

  7. celery使用方法

    1.celery4.0以上不支持windows,用pip安装celery 2.启动redis-server.exe服务 3.编辑运行celery_blog2.py !/usr/bin/python c ...

  8. Leetcode 18. 4Sum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  9. SQLAlchemy(一)

    说明 SQLAlchemy只是一个翻译的过程,我们通过类来操作数据库,他会将我们的对应数据转换成SQL语句. 运用ORM创建表 #!/usr/bin/env python #! -*- coding: ...

  10. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...