CSS实现左侧多级菜单栏

时间:2022-03-08 20:35:31

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

CSS实现左侧多级菜单栏

我也是初学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>

这样会显示如下效果

CSS实现左侧多级菜单栏

这里不好看的地方是:

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>

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

CSS实现左侧多级菜单栏

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>

CSS实现左侧多级菜单栏

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>

CSS实现左侧多级菜单栏

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实现左侧多级菜单栏