<!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. Url重写——伪静态实现

    简述: 在我们浏览网站的时候,很多都是以.html结尾的.难道这些都是静态网页么?其实不是的,它们很多是伪静态 那么什么是伪静态?顾名思义,就是假的静态页面.通过某种设置让你看成是静态的. Q:为何要 ...

  2. git 指令

    單獨看這個 commit id 做了什麼修改 git show CommitID or git diff CommitID^!

  3. 格式化 float 类型,保留小数点后1位

    """  练习 :   小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,   并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...

  4. DBoW2库介绍

    DBoW2库是University of Zaragoza里的Lopez等人开发的开源软件库. 由于在SLAM回环检测上的优异表现(特别是ORB-SLAM2),DBoW2库受到了广大SLAM爱好者的关 ...

  5. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  6. 【BZOJ-3881】Divljak AC自动机fail树 + 树链剖分+ 树状数组 + DFS序

    3881: [Coci2015]Divljak Time Limit: 20 Sec  Memory Limit: 768 MBSubmit: 508  Solved: 158[Submit][Sta ...

  7. Javascript中两个等于号和三个等于号的区别（==/===）

    ==//表示值的比较 ===//表示对象类型的比较 1.对于string,number等基础类型,==和===是有区别的. a)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,== ...

  8. HTML5规范-相关资料链接(大多都是英文文档)

    网站做的更规范,尽量选择正确的HTML5结构元素.地址:http://html5doctor.com/happy-1st-birthday-us/#flowchat 了解算法和分块      知道文档 ...

  9. marked.js简易手册

    marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...

  10. C#通过WebClient/HttpWebRequest实现http的post/get方法

    C#通过WebClient/HttpWebRequest实现http的post/get方法 http://www.cnblogs.com/shadowtale/p/3372735.html