文档章节

【css技术指南笔记】第六章 导航菜单

郑二
 郑二
发布于 2015/04/10 11:48
字数 187
阅读 8
收藏 0
点赞 0
评论 0
<!DOCCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery.js"></script>
        <style type="text/css">
            .multi-drop-menu{
                float: left;
            }
            .multi-drop-menu *{
                margin: 0;
                padding: 0;
            }
            .multi-drop-menu li{
                list-style-type: none;
                position: relative;
            }
            .multi-drop-menu a{
                display: block;
                background: #eee;
                padding: 3px;
                border: 1px solid #ffe;
                color: #aaa;
                text-decoration: none;
            }
           /* .multi-drop-menu a:hover{
                background: #fff;
            }*/
            .multi-drop-menu li{
                float: left;
            }

            .multi-drop-menu li ul{
                display: none;
                position: absolute;
                /*display: block;*/
                left: 0;
                top: 100%;
            }
            .multi-drop-menu li ul li{
                float: none;
            }
            .multi-drop-menu li:hover>ul{
                display: block;
            }

            .multi-drop-menu li li ul{
                left: 100%;
                top: 0;
            }
            .multi-drop-menu li:hover > a{
                background: #fff;
            }
        </style>
    </head>
    <body>
       <nav>
           <ul class="multi-drop-menu">
               <li><a href="#">LL1</a></li>
               <li><a href="#">LL2</a></li>
               <li>
                    <a href="#">LL3</a>
                    <ul>
                        <li><a href="#">LL3LL1</a></li>
                        <li>
                            <a href="#">LL3LL2</a>
                            <ul>
                                <li><a href="#">1111</a></li>
                                <li><a href="#">3333</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LL3LL3</a></li>
                    </ul>
               </li>
               <li><a href="#">LL4</a></li>
           </ul>
       </nav>
    </body>
</html>

记录实现的下拉导航




© 著作权归作者所有

共有 人打赏支持
郑二
粉丝 0
博文 18
码字总数 4318
作品 0
朝阳
程序员
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac ⋅ 2011/12/02 ⋅ 1

最近重点学习计划

目前的技术还有挺多不全面的地方,有很多系统api和常见类库连基本的用法都不熟悉。 基本用法熟悉的基础上,探索一下原理和进阶使用。 最近任务 写一个github开源项目,下载器的。如果能做成通...

云飞扬v5 ⋅ 2015/11/02 ⋅ 2

布局结构命名

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:col 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginNar 标志:logo 广告:ban...

0000001 ⋅ 2011/05/13 ⋅ 0

CSS模块命名规则

头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar   栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:left right center   登...

CharmyZ ⋅ 2016/08/24 ⋅ 0

DIV+CSS命名规范有助于SEO

DIV+CSS命名规范有助于SEO 为了更加符合SEO的规范,css3教程 下面是目前流行的CSS+DIV的命名规则: 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subN...

向日葵饼干 ⋅ 2014/05/24 ⋅ 0

Div+CSS命名规范(前端web开发命名规范)

Div+CSS命名规范 (一)窗体 头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar 栏目:column   页面外围控制整体布局宽度:wrapper   左右中:l...

乐派电影 ⋅ 2014/04/02 ⋅ 1

建议大家用的css命名规则

每个人的CSS命名规则都不一样,给后期维护人员带来麻烦。如果大家都统一的话,就提高了工作效率,方便自己,也方便他人。下面为你介绍CSS的命名规则吧! 一、常用命名规则 头:header 内容:...

五味格子 ⋅ 2011/05/17 ⋅ 0

个人css命名规则

头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar 栏目:column   页面外围控制整体布局宽度:wrapper   左右中:left right center   登录条...

peasant ⋅ 2015/02/25 ⋅ 0

web标准化设计:常用的CSS命名规则

常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginba...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

让CSS书写更漂亮!

css书写顺序: 1.位置属性(position, top, right, z-index, display, float等)   2.大小(width, height, padding, margin)   3.文字系列(font, line-height, letter-spacing, color- te......

小陈同学 ⋅ 2014/03/22 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 17分钟前 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 26分钟前 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 39分钟前 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 49分钟前 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

4.10/4.11/4.12 lvm讲解 4.13 磁盘故障小案例

准备磁盘分区 fdisk /dev/sdb n 创建三个新分区,分别1G t 改变分区类型为8e 准备物理卷 pvcreate /dev/sdb1 pvcreate /dev/sdb2 pvcreate /dev/sdb3 pvdisplay/pvs 列出当前的物理卷 pvremo...

Linux_老吴 ⋅ 今天 ⋅ 0

zabbix 3.4安装

#已装好lamp环境 1.安装相关yum仓库 rpm -i http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zabbix-release-3.4-2.el7.noarch.rpm #tip:rpm -ql zabbix-release 看上面这个软件装了哪些东......

山月关 ⋅ 今天 ⋅ 0

Java的Excel导出工具类

首先在POM中引入需要的Jar <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency><dependency><groupId>o......

Kxvz ⋅ 今天 ⋅ 0

springboot 使用jsp

目录结构: 启动文件的Application必须在contorller文件的父级 文件路径在src/main/webapp下面 我的配置:前缀是/WEB-INF/jsp/ pom.xml需要加入tomcat-embed-jasper, 对jsp的支持的依赖 <de...

夜醒者 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部