一个简单实用的css三级菜单效果

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>css实现三级菜单</title>

    <style type="text/css">

        *{margin:0;padding:0}

        ul{list-style:none}

        a{text-decoration:none}

        body{font-size:16px}

        .nav{width:100%;height:40px;line-height:40px;background:#333}

        .container{width:1000px;margin:0px auto}

        .nav li{float:left;position:relative}

        .nav li a{float:left;width:100px;text-align:center;height:40px;color:#fff}

        .nav li ul{width:100%;background:#fff;position:absolute;left:0px;top:40px;display:none}

        .nav li li{float:none}

        .nav li li a{float:none;display:inline-block}

        .nav li li a{color:#333}

        .nav li ul li ul{left:100px;top:0px}

        .nav li:hover{background:red}

        .nav li:hover>ul{display:block}

        .banner img{width:100%}

    </style>

</head>

<body>

    <div id="nav" class="nav">

        <div class="container">

            <ul>

                <li><a href="#">home</a></li>

                <li>

                    <a href="#">javascript</a>

                    <ul>

                        <li><a href="#">css</a></li>

                        <li>

                            <a href="#">html5</a>

                            <ul>

                                <li><a href="#">angular.js</a></li>

                                <li><a href="#">node.js</a></li>

                                <li><a href="#">vue.js</a></li>

                                <li><a href="#">React</a></li>

                            </ul>

                        </li>

                        <li><a href="#">jQuery</a></li>

                        <li><a href="#">backbone</a></li>

                    </ul>

                </li>

                <li>

                    <a href="#">editor</a>

                    <ul>

                        <li><a href="#">Sublime Text</a></li>

                        <li><a href="#">Atom</a></li>

                        <li><a href="#">Dreamweaver</a></li>

                        <li><a href="#">HBuilder</a></li>

                    </ul>

                </li>

                <li><a href="#">about us</a></li>

                <li><a href="#">Contact us</a></li>

            </ul>

        </div>

    </div>

    <div class="img">

        <img src="data:image/1.jpg" alt="">

    </div>

</body>

</html>

css三级菜单效果的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. CSS实现三级菜单[转]

    头部导航条布局 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  3. HTML+CSS实现简单三级菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  6. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  7. 学习CSS制作菜单列表，举一反三

    1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  9. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

  1. sha512散列(C语言)

    /** * \file sha4.h * * \brief SHA-384 and SHA-512 cryptographic hash function * * Copyright (C) 2006 ...

  2. [转]C/C++ 程序员必须收藏的资源大全

    from: https://github.com/jobbole/awesome-cpp-cn C++ 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome – XXX 系列 ...

  3. 解决fedora25安装vmware12问题:

    运行vmware需要几个工具.gcc 编译工具是必须要有的.dnf groupinstall “Development tools“rpm -qa |grep kernel-headersrpm -q ...

  4. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

  5. webuploader在IE8/9下上传遇到的两个问题

    最近在做图片上传功能. 点击一个按钮,弹出一个iframe,它是百度的webuploader插件 在点击关闭按钮时,IE9下总是会报错: __flash__removeCallback未定义错误 解决 ...

  6. Tensorflow serving的编译

    Tensorflow serving提供了部署tensorflow生成的模型给线上服务的方法,包括模型的export,load等等. 安装参考这个 https://github.com/tensorf ...

  7. 使用静态函数impl模式做接口

    使用静态函数impl模式做接口 impl即桥接模式,主要是为了隐藏数据和减少不必要的编译. 普通的impl模式做接口一般是: A类是接口,B类继承A类,是A类的实现,C类,包含A类和B类的头文件,把B ...

  8. 动态创建 Lambda 表达式

    首先我们看一个简单 Lambda 表达式的构成. i => i > 5 在这个表达式中,"i" 被称为 Parameter,"i > 5" 是 ...

  9. 相机标定简介与MatLab相机标定工具箱的使用（未涉及原理公式推导）

    相机标定 一.相机标定的目的 确定空间物体表面某点的三维几何位置与其在图像中对应点之间的相互关系,建立摄像机成像的几何模型,这些几何模型参数就是摄像机参数. 二.通用摄像机模型 世界坐标系.摄像机坐标 ...

  10. Oracle存储过程语法

    原文链接:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程  1 CREATE OR REPLACE PROCEDURE 存储过程名  ...