首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化

我也是初学html, 所以写的比较啰嗦

1. 使用列表将内容显示出来

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /*写css的地方*/
    </style>
</head>
<body>
    <div id="leftMenu">
        <ul>
            <li><a href="#">一级目录1</a>
                <ul>
                    <li><a href="#">100001</a></li>
                    <li><a href="#">100002</a></li>
                </ul>
            </li>
            <li><a href="#">一级目录2</a></li>
            <li><a href="#">一级目录3</a>
                <ul>
                    <li><a href="#">300001</a></li>
                    <li><a href="#">300002</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

这样会显示如下效果

这里不好看的地方是:

A. 二级目录预想是排在一级目录右边的, 但现在却是在下面的

B. 目录前面的小黑点和小圆圈是不需要的

2. 修改css

<style>
    *{margin: 0;padding: 0;}   /*消除各种浏览器的边距默认值*/
    #leftMenu ul{                     /*作用于id=leftMenu的元素所有含有的ul*/
        width: 100px;                 /*宽度设置为100*/
        background: #DADADA;     /*增加背景色方便查看*/
        list-style: none;           /*去除列表的小圆点*/
    }
   
    #leftMenu li{                  /*作用于id=leftMenu的元素所有含有的li*/
        width: 100px;             /*宽度设置为100*/
    }
</style>

嗯, 这样好看多了, 但是二级目录还是没有排版到一级目录的右边

3. 给ul加上 position:absolute; 使ul脱离文档流, 悬浮在原来文档流的上面

*{margin: 0;padding: 0;}   /*消除各种浏览器的边距默认值*/
    #leftMenu ul{              /*作用于id=leftMenu的元素所有含有的ul*/
        width: 100px;            /*宽度设置为100*/
        background: #DADADA;     /*增加背景色方便查看*/
        list-style: none;        /*去除列表的小圆点*/
        position:absolute;
    }
   
    #leftMenu li{              /*作用于id=leftMenu的元素所有含有的li*/
        width: 100px;            /*宽度设置为100*/
    }
</style>

4. 增加功能: 二级目录默认不显示, 鼠标悬停在一级目录上时, 才显示

<style>
    *{margin: 0;padding: 0;}   /*消除各种浏览器的边距默认值*/
    #leftMenu ul{              /*作用于id=leftMenu的元素所有含有的ul*/
        width: 100px;            /*宽度设置为100*/
        background: #DADADA;     /*增加背景色方便查看*/
        list-style: none;        /*去除列表的小圆点*/
        position:absolute;
    }
   
    #leftMenu li{              /*作用于id=leftMenu的元素所有含有的li*/
        width: 100px;            /*宽度设置为100*/
    }
    #leftMenu li>ul{       /*作用于 li的直接子元素ul */
        left: 100px;            /*一级目录本身宽度100px, 所以二级目录显示的时候要向右偏移100px, 为什么使用的是left呢? 自己学习css吧*/
        display: none;    /*二级目录默认是不显示的*/
    }
    #leftMenu li:hover>ul /*当鼠标悬停在li上时, li的直接子元素ul就显示出来*/
    {display: block;}     /*显示出来*/
</style>

5. 上面的问题是 100001 没有与 一级目录1 同一高度

<style>
    *{margin: 0;padding: 0;}   /*消除各种浏览器的边距默认值*/
    #leftMenu ul{              /*作用于id=leftMenu的元素所有含有的ul*/
        width: 100px;            /*宽度设置为100*/
        background: #DADADA;     /*增加背景色方便查看*/
        list-style: none;        /*去除列表的小圆点*/
        position:absolute;
    }
   
    #leftMenu li{              /*作用于id=leftMenu的元素所有含有的li*/
        width: 100px;            /*宽度设置为100*/
        position: relative;      /*设置为相对位置*/
    }
    #leftMenu li>ul{       /*作用于 li的直接子元素ul */
        left: 100px;            /*一级目录本身宽度100px, 所以二级目录显示的时候要向右偏移100px, 为什么要用left呢? 自己学习css吧*/
        top: 0;           /*top的偏移位置相对于父元素为0*/
        display: none;    /*二级目录默认是不显示的*/
    }
    #leftMenu li:hover>ul /*当鼠标悬停在li上时, li的直接子元素ul就显示出来*/
    {display: block;}     /*显示出来*/
</style>

6. 给一个完整界面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        *{margin:0;padding:0;}
        #leftMenu ul{width:100px;position:absolute;background:#DADADA;list-style:none;}
        #leftMenu li{width:100px;position: relative;}
        #leftMenu li>ul{left: 100px;top: 0;display: none;}
        #leftMenu li:hover>ul{display: block;}
    </style>
</head>
<body>
    <div id="leftMenu">
        <ul>
            <li><a href="#">一级目录1</a>
                <ul>
                    <li><a href="#">100001</a></li>
                    <li><a href="#">100002</a>
                        <ul>
                            <li><a href="#">100021</a></li>
                            <li><a href="#">100022</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">一级目录2</a></li>
            <li><a href="#">一级目录3</a>
                <ul>
                    <li><a href="#">300001</a></li>
                    <li><a href="#">300002</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

CSS实现左侧多级菜单栏的更多相关文章

  1. 左侧多级菜单,高亮显示js

    左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示 <ul class="nav navbar-stacked" id="navs"> {ded ...

  2. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  3. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  4. css实现左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  5. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  6. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  7. [转]css实现左侧宽度自适应，右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  8. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  9. layui 左侧三级菜单栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 18.4 #if 0…endif的用途

    #if  0  ...   #endif的作用跟/*...*/的作用是一样的,就是注释! 可是为什么不用注释符号/*? 答:为了解决嵌套注释.如下: #include“stdio.h” int mai ...

  2. springMVC框架返回JSON到前端日期格式化

    在Controller类中,需要返回JSON的方法上加上注释@ResponseBody,这是必须的. 然后spring-servlet.xml配置如下: <?xml version=" ...

  3. 解决mysqli的中文乱码问题

    有时候我们向服务器传汉字,出现内容为空,或???的问题,是因为mysqli对utf8的解码属于 Unicode码,会解析为 Unicode 码:所以我们要对内设置成gbk码, 尽管gbk码,很古来,但 ...

  4. ps-如何去背景色（将背景色变透明）

    由于生活或工作的需求,图片的处理是必不可少.其中将图片某一部分变为透明,或者截取图片的某一部分比较常见. 1.首先,打开待处理的图片: 2.复制背景图层,将背景图层设为不可见(左边的眼睛即可),选择左 ...

  5. win7 80端口被iis占用

    下载iis管理器,打开,关闭80端口占用

  6. Python高级技巧：用一行代码减少一半内存占用

    我想与大家分享一些我和我的团队在一个项目中经历的一些问题.在这个项目中,我们必须要存储和处理一个相当大的动态列表.测试人员在测试过程中,抱怨内存不足.下面介绍一个简单的方法,通过添加一行代码来解决这个 ...

  7. Servlet-知识点

    2018年10月05日 16:52:56 yigg 阅读数:38   1.JavaWeb开发的目录结构 https://blog.csdn.net/u012661010/article/details ...

  8. scrollview嵌套recyclerview显示不全现象

    只需在recyclerview的外层加入一个父布局就好了 <RelativeLayout android:layout_width="match_parent" androi ...

  9. 深度学习原理与框架-Tfrecord数据集的读取与训练(代码) 1.tf.train.batch(获取batch图片) 2.tf.image.resize_image_with_crop_or_pad(图片压缩) 3.tf.train.per_image_stand..(图片标准化) 4.tf.train.string_input_producer(字符串入队列) 5.tf.TFRecord(读

    1.tf.train.batch(image, batch_size=batch_size, num_threads=1) # 获取一个batch的数据 参数说明:image表示输入图片,batch_ ...

  10. 解决bootstrap和easyUI部分css类冲突问题。

    今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊. 我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样 ...