文档章节

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

郑二
 郑二
发布于 2015/04/10 11:48
字数 187
阅读 8
收藏 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
朝阳
程序员
CSS模块命名规则

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

CharmyZ
2016/08/24
13
0
DIV+CSS命名规范有助于SEO

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

向日葵饼干
2014/05/24
136
0
web标准化设计:常用的CSS命名规则

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

晨曦之光
2012/03/09
28
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
1K
1
《Knockout应用开发指南》系列技术文章整理收藏

《Knockout应用开发指南》系列技术文章整理收藏 Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,Knockout应用开发指南系列整理了Knockout方面的技术文章,供学习...

开元中国2015
2015/06/22
26
0

没有更多内容

加载失败,请刷新页面

加载更多

20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
18分钟前
0
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部