文档章节

【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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

阿里云API网关使用教程

API 网关(API Gateway)提供高性能、高可用的 API 托管服务,帮助用户对外开放其部署在 ECS、容器服务等阿里云产品上的应用,提供完整的 API 发布、管理、维护生命周期管理。用户只需进行简...

mcy0425
35分钟前
4
0
解决远程登陆误按ctrl+s锁屏假死恢复

使用putty时,偶尔发生屏幕假死,不能输入等情况。 后来发现,只要数据ctrl+s,就会假死;输入ctrl+q就可以恢复过来。 很多刚从windows转移到linux上来工作的朋友,在用vi/vim编辑文件时,常常...

HJCui
38分钟前
0
0
@Transactional

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于...

asdf08442a
43分钟前
2
0
widows下强制解除8080端口占用问题

使用win+R打开命令窗口 输入以下命令查看哪个任务占用了8080端口 netstat -ano |findstr "8080" 然后通过任务id强制关闭占用该端口的进程 tskill 10044 // 自己的试情况而定,这个ID是LISTE...

_Artisan
52分钟前
2
0
productFlavors简单实用

最近项目中,不同环境需要配置的参数越来越多,为了减少修改代码次数。研究了一下productFlavors的使用方式,总结如下 1. as3.0以上版本使用productFlavors时需要指定一个flavorDimensions,...

火云
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部