一个简单实用的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. NodeJS+Express下构建后端MVC文件结构

    关于MVC的结构大体上有两种方式,其一按照层级进行文件夹分类,其二是按照业务进行文件夹分类.关于这个demo相关的业务简单,所以暂采用第一种的方式,当然实际当中很恨复杂的项目可以采用两种方式相结合的方 ...

  2. Android安全攻防战，反编译与混淆技术完全解析（上）

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/49738023 之前一直有犹豫过要不要写这篇文章,毕竟去反编译人家的程序并不是什么值 ...

  3. php给客户端返回数据注意。

    亲身测试: 返回的时候不要直接返回字符串,要用数组的方式返回数据客户端才能接收. 看代码. <?php require_once("../base.php"); functi ...

  4. java.io.Serializable 序列化接口

    什么是序列化.反序列化? Serialization(序列化)是一种将对象以一连串的字节描述的过程: 反序列化deserialization是一种将这些字节重建成一个对象的过程. 序列化通俗一点说就是 ...

  5. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  6. javase-排序

    public class sort { public static void main(String[] args) { String[] arr = {"aa","bb ...

  7. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  8. PHPCMS_V9 模型字段添加单文件上传功能

    后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...

  9. Android 笔记 文件存取 day5

    针对文件的存取 package com.example.file01; import com.example.service.FileService; import android.app.Activ ...

  10. 教你实践ASP.NET Core Authorization

    本文目录 Asp.net Core 对于授权的改动很友好,非常的灵活,本文以MVC为主,当然如果说webapi或者其他的分布式解决方案授权,也容易就可以实现单点登录都非常的简单,可以使用现成的Iden ...