文档章节

【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
朝阳
程序员
私信 提问
DIV+CSS命名规范有助于SEO

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

向日葵饼干
2014/05/24
136
0
CSS模块命名规则

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

CharmyZ
2016/08/24
13
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
Android--面试中遇到的问题总结(三)

《Android 开发工程师面试指南 LearningNotes 》,作者是陶程,由梁观全贡献部分。大家可以去知乎关注这两位用心的少年。这份指南包含了大部分Android开发的基础、进阶知识,不仅可以帮助准备...

sealin
2017/02/22
0
0
《HTML+CSS3权威指南》笔记摘要 - 目录

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

Contac
2011/12/02
0
1

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
29分钟前
1
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
32分钟前
4
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部