css做垂直三级菜单

CSS是前端开发中必不可少的技术之一，它可以帮助我们美化网页的样式，为用户带来更好的浏览体验。在网页设计中，垂直三级菜单是一个常见的组件，下面我们就来看看如何用CSS来实现一个垂直三级菜单。

在HTML中，我们可以使用无序列表（ul）和有序列表（ol）来创建菜单。一般情况下，我们都会将菜单放在一个div容器中，并为其添加一个唯一的ID以进行样式的控制。以下是一个基本的菜单结构：

    <div id="menu">
        <ul>
            <li><a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1-1</a>
                        <ul>
                            <li><a href="#">三级菜单1-1-1</a></li>
                            <li><a href="#">三级菜单1-1-2</a></li>
                            <li><a href="#">三级菜单1-1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单1-2</a></li>
                    <li><a href="#">二级菜单1-3</a></li>
                </ul>
            </li>
            <li><a href="#">一级菜单2</a></li>
            <li><a href="#">一级菜单3</a></li>
        </ul>
    </div>

接下来，我们在CSS中为菜单添加样式：

    #menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #menu li {
        position: relative;
    }
    
    #menu ul ul {
        position: absolute;
        top: 0;
        left: 100%;
        display: none;
    }
    
    #menu li:hover > ul {
        display: block;
    }

第一段CSS代码用来清除默认的列表样式，不显示小圆点，内外边距也要设置为0。第二段CSS将每个li元素设为相对定位，用来控制子菜单的位置。第三段CSS将子菜单设为绝对定位，位于其父元素的右侧，初始状态下不显示。最后，第四段CSS通过:hover属性选择器，当鼠标悬停在li元素上时，子菜单显示出来。

到这里，我们的垂直三级菜单就已经完成了。你可以试着修改CSS样式，让菜单看起来更加漂亮。如果你想要添加更多的级别，只需要在HTML中再嵌套一层ul和li即可。