css左侧二级联动下拉菜单

CSS左侧二级联动下拉菜单是一种常见的网页导航样式。它通常应用于网站的侧边栏或导航栏中，使用户能够快速地浏览网站的不同类别和信息。

    .nav {
        display: flex;
        flex-direction: column;
    }
    
    .nav > li {
        position: relative;
        list-style: none;
        padding: 10px 0;
    }
    
    .nav > li:hover .sub-menu {
        display: block;
    }
    
    .sub-menu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    
    .sub-menu > li {
        list-style: none;
        padding: 5px 0;
    }
    
    .sub-menu > li:hover {
        color: #fff;
        background-color: #333;
    }

上述代码中， ".nav" 类用于定义导航栏的样式，通过 "flex-direction" 属性将导航栏的子元素列在竖直方向上。每个导航项使用 "li" 标签定义，它们的位置被设置为相对位置，以便在鼠标悬停时显示下拉菜单。

"sub-menu" 类用于定义下拉菜单的样式，其中 "display" 属性被设置为 "none"，使其在默认情况下不可见。在鼠标悬停在其父元素（导航项）上时，它将根据 "display: block" 的属性值呈现在界面上。

下拉菜单中的每个子元素都以 "li" 标签定义，并具有自己的样式。当鼠标悬停在下拉菜单的某个子元素上时，其文字颜色和背景颜色将被更改。

使用 CSS 左侧二级联动下拉菜单可以为用户提供更好的网页浏览体验。它在设计和使用上灵活而且易于维护，使其成为许多网站的首选导航栏样式。