<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src=""></script><!--引入的js  src是引入的js样式路径-->
        <link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
        <!--当前页面的三要素-->
        <title>示例-导航</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">

<!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0}
            body{font-family:"微软雅黑";font-size:14px;}
            .wf_cont{width:400px;height:600px;margin:100px auto;}
            a{text-decoration:none;}
            ul li{list-style-type:none;}
            nav{width:208px;height:;margin:10px auto;}
            nav>ul>li{background:#C6321F;}
            nav>ul>li>a{color:#fff;line-height:40px;padding-left:15px;box-shadow:0 1px 1px #d03b39 inset;border-bottom:1px solid #9llclc;
            display:block;height:40px;
            font-weight:700;
            position:relative;
            }
            nav>ul>li>a>span{
                position:absolute;
                right:10px;top:8px;
                padding:2px 5px;
                height:20px;
                background:#9e1919;
                line-height:20px;
                color:#f67d7b;
                font-weight:none;
            }
            nav>ul>li>a:hover{background:#D53A27;}
            nav>ul>li>a:hover span{color:#fff;}
            nav>ul>li>ul{
                background:#9A2817;
            }
            nav>ul>li>ul>li>a {
                color:#d4f4f4;
                height:35px;
                line-height:35px;
                padding-left:15px;
                display:block;
                border-bottom:1px solid #821717;
            }
            nav>ul>li>ul>li>a:hover{
                background:#FF7400;
                color:#fff;
            }
            nav>ul>li>ul{
                height:0;overflow:hidden;
            }
            /*css 鼠标点击事件*/
            nav>ul>li:target ul{
                       height:auto;
            }
        </style>
    </head>
<body>
<div class="wf_cont">
    <nav>
        <ul><!--通过点击li 》 nav1 》#nav1 改变ul高度-->
            <li id="nav1">
                <a href="#nav1">IT培训 <span class="navmore">更多</span></a>
                <ul>
                    <li><a  target="_balank"href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav2">
                <a href="#nav2">中小学/大学<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav3">
                <a href="#nav3">亲子课堂<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav4">
                <a href="#nav4">语言培训<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
</body>
</html>

css3 二级菜单的更多相关文章

  1. Bootstrap系列 -- 40. 导航条二级菜单

    在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...

  2. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  3. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  6. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  7. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  8. Excel——使用OFFSET、MATCH、COUNTA实现二级菜单

    如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...

  9. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. windows更改Jupyter Notebook工作的目录

    1.将打开的Jupyter Notebook程序关闭,然后找到桌面快捷方式,右键=>属性,然后把目标后面输入框最后的“%USERPROFILE%”这个参数去掉后,确定.否则之后做的其它修改无法生 ...

  2. [LeetCode] 系统刷题4_Binary Tree & Divide and Conquer

    参考[LeetCode] questions conlusion_InOrder, PreOrder, PostOrder traversal 可以对binary tree进行遍历. 此处说明Divi ...

  3. 家庭记账本之微信小程序（七）

    最后成果 在经过对微信小程序的简单学习后,对于微信小程序也稍有理解,在浏览学习过别人的东西后自己也制作了一个,觉得就是有点low,在今后的学习中会继续完善这个微信小程序 //index.js //获取 ...

  4. Vue引入elementUI组件全过程

    参考:https://www.cnblogs.com/fubinbin/p/9938528.html 在vue脚手架安装完成之后,页面正常跳出vue刚安装完的界面 我们开始引入elementui 1. ...

  5. 开发流程（Vue）

    1.当你拿到一个需求时,先不要着急完成静态页面 2.重点观察数据结构,进行数据的分析,包括前端所需要的数据类型从而进行数据类型定义(如果是前后端分离的情况下,建议不要考虑前端数据和数据库的数据类型对应 ...

  6. IIS下载无后缀文件的设置

    HTTP 错误 404.3 - Not Found由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射.   解决方法:MIME类型加 .  ...

  7. 让hive的表注释和字段注释支持中文

    此处用的数据库类型为mysql.发现hive在初始化创建这些表的时候,大部分字段的字符集给设置成了latin1,然后collation设成了latin1_bin. 但是我们在hive中创建表时,表注释 ...

  8. [openjudge-搜索]单词接龙

    题目描述 描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙&q ...

  9. mysql密码的查看/修改

    2.Mysql的Root密码忘记----查看或修改方法 2.1)启动命令行:windows微标键+R 2.2)在命令行输入taskkill /f /im mysqld.exe 回车,暂停Mysql服务 ...

  10. Dockerfile构建容器---构建本地tomcat

    前序 这是我第一次摸索.做个笔记记录一下. 首先准备好tomcat与jdk解压到与Dockerfile同级的目录下, 构建文件命名必须为Dockerfile, 为什么同级, 因为build的时候会默认 ...