一个简单实用的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. lanmp之一 （动静分离）

    一.lanmp--需求篇 1. 准备两台centos 6,其中一台机器跑mysql,另外一台机器跑apache,nginx + php 2. 同时安装apache和nginx,其中nginx启动80端 ...

  2. ajaxFileupload多文件上传

    最近有个功能模块需要上传图片,为了和之前的伙伴们保持一致我也使用了ajaxFileupload, 但是源码只支持单文件上传,所以百般斟酌之下决定修改源码,废话不多说直接上代码 HTML上传代码段: & ...

  3. h5手机页面禁止缩放

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  4. wpf TreeView

    <Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewDataBindingSample"        ...

  5. iOS监听tableView组头切换事件

    - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSIntege ...

  6. 名词含义阅读 todolist

    1.node webkit 2.C#设计模式 3.算法导论 4.SQLSERVER RowNum() 5.图片文字识别 6.tuple 7.yield 8.Web语义化 (多用 p ul ol li ...

  7. 剑指Offer-【面试题06：重建二叉树】

    package com.cxz.question6; /* * 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. * 例如:前序遍历序列 ...

  8. Duilib源码分析(六)整体流程

    在<Duilib源码分析(一)整体框架>.<Duilib源码分析(二)控件构造器—CDialogBuilder>以及<Duilib源码分析(三)XML解析器—CMarku ...

  9. Notepad++ 使用nppexec插件配置简易开发环境

    notepad++  采用nppexec插件来配置简易开发环境,而不需要笨重的IDE以及麻烦.重复的命令行.控制台输入: 以下为本人最近用到的脚本配置: //编程语言脚本中$(NAME_PART).x ...

  10. Windows下用tree命令生成目录树

    有时候我们想为某个目录制作一个文档结构图,在Windows上,我们知道是使用tree命令. 但是,默认情况下tree只显示子目录名,而不显示子目录里的文件名,需要加上/F参数才能显示完整的文件名.   ...