<!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. 创业日志N，一听到别人说创业我就怕

    最近总有些朋友想创业,咨询我的意见. 一般是在公司干腻了,有个想法,想出来试试水.还有是觉得自己的idea太棒了,想试试. 相同的是两者都有点怕.听说最近创业环境不好,没有投资!有个朋友推荐的创业者, ...

  2. 图解javascript

  3. 1207MySQL 面试题

    转自http://blog.itpub.net/26435490/viewspace-1133659/ 1, mysql的复制原理以及流程. (1)先问基本原理流程,3个线程以及之间的关联. (2)再 ...

  4. Mysql操作语句

    MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准SQL数值数据类型. 这 ...

  5. [转]SQL 常用函数及示例

    原文地址:http://www.cnblogs.com/canyangfeixue/archive/2013/07/21/3203588.html --SQL 基础-->常用函数 --===== ...

  6. visual studio 2013 使用域名调试本地项目

    一.在localhost添加需要指定的域名,如:test.domain.com 二.以管理员身份启动VS,并打开项目 三.修改IIS Express的配置文件(一般位于:C:\Users\当前用户\D ...

  7. Android App的设计架构：MVC,MVP,MVVM与架构经验谈

    相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...

  8. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. WEB开发最佳实践

    linux命令 man ls:显示ls的命令详情,man命令可以查具体的命令详情

  10. 1. Django系列之Django与ajax上传文件

    html代码如下: <div class="form-group"> <label for="exampleInputFile">附件上 ...