一个简单实用的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. gdb 调试多线程

    基本i threads 等操作略过,只谈线程同步.异步控制: 先点到,gdb attach到主线程t1 时,所有线程都会停止,所谓同步异步效果,是指在apply continue到所有线程之后, 再切 ...

  2. 小米4 miui专用 Xposed安装器86版

    转载自 http://www.52pojie.cn/thread-516435-1-1.html 写在前面:各位用xp受到不同限制,有些机型还找不到框架包,又要刷第三方rec又要谨慎选择框架版本.官方 ...

  3. MyBatis Like查询处理%_符号

    如果我们数据库中存的字段包含有"%_"这两个like查询的通配符,那么在查询的时候把"%_"当作关键字是查询不出来的,因为mybatis会把这两个字符当作通配符 ...

  4. OSG计时器与时间戳

    static osg::Timer* sendMsgTimer = new osg::Timer; if (sendMsgTimer->time_m()>100)//100ms {// d ...

  5. swift之inout

    在swift中,我们常常对数据进行一些处理.因为swift的计算属性,所以如果不是大量重复性处理,基本可以在set及didSet中改变原数据的一些状态.但需要用到同样的算法处理大量数据的时候,仍然需要 ...

  6. iOS 版本号大小比较

    NSString *num1 = @"5.2.0";    NSString *num2 = @"5.3.0"; if ([num1 compare:num2 ...

  7. XStream xml 解析框架使用笔记

    1. xml的标签可以映射为类.类成员变量 2. 有子标签的标签映射为类,没有子标签的便签映射为类成员变量 3. 类名.类成员变量名如与标签名不一致需要通过注解或代码设置别名 // 类名 @XStre ...

  8. Launch Mode

    1.standard standard的加载模式不管是否已经存在Activity都会再次创建一个Acitivy,同时将新创建的Activity加入栈顶. 所以在这种加载模式下需要多次返回才能退出. 2 ...

  9. kettle系列-6.kettle实现多字段字典快速翻译

    在数据清洗转换中,常见的字典翻译,如性别在原表中是1(男).2(女)等,类似还有很多较大的字典需要翻译,若同一个表中有很多个字典需要翻译,采用[数据库查询]方式翻译的话效率就会相当低下. 这里采用ja ...

  10. Java Spring的IoC和AOP的知识点速记

    Spring简介 Spring解决的最核心的问题就是把对象之间的依赖关系转为用配置文件来管理,这个是通过Spring的依赖注入机制实现的. Spring Bean装配 1. IOC的概念以及在Spri ...