一个简单实用的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. [转]加速Android Studio/Gradle构建

    加速Android Studio/Gradle构建 android android studio gradle   已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多, ...

  2. c/c++ string

    string类的定义.操作. #include<iostream> #include<string> using namespace std; int main() { // ...

  3. UIButton无法响应点击事件

    一.问题描述 因为项目需要,需要UITableView上添加固定的筛选表头,一直固定,不能随UITableView滚动.所以直接将表头与UITableView分离,将它添加到控制器的UIView上,即 ...

  4. select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！

    第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...

  5. javaSE基础07

    javaSE基础07 一.static静态修饰符 用了static修饰的变量就会变成共享的属性,只会初始化一次,在内存中只存在一个,并且每个对象都可以访问,存放在方法区(数据共享区) 1.1 stat ...

  6. linux vim 插入行号

    1 在文本中插入行号 最近有朋友提到某编辑器有一个可以插入行号的插件,问Vim有没有办法可以在文章中插入行号.%$^&*#8~#$@#!--让我们看一下有多少种方式可以在vim中插入行号或数字 ...

  7. SQL Server删除重复行的6个方法

    SQL Server删除重复行是我们最常见的操作之一,下面就为您介绍六种适合不同情况的SQL Server删除重复行的方法,供您参考. 1.如果有ID字段,就是具有唯一性的字段 delect   ta ...

  8. 史上最全的maven的pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  9. ASP.NET MVC 设置Area中 Controller 的方法 默认启动页

    MVC中通常分区域编程,互不干扰,如果需要设置某个区域下面的某个控制器下面的某个方法为默认启动页的话,直接修改项目的路由如下: public static void RegisterRoutes(Ro ...

  10. MYSQL字符类型数值排序

    今天遇到MySQL数字排序问题,我的排序字段是经过计算后的,而计算后的字段直接拿来排序就会按照字符一个个排序,所以这里找到简单的方法, ORDER BY 排序字段* 或者 ORDER BY 排序字段+ ...