css导航下拉菜单二级菜单多列

CSS导航下拉菜单的二级菜单多列是一种常见的网页设计布局，能够使二级菜单更加清晰明了、有效利用页面空间。

我们可以通过CSS的布局和样式来实现这种布局。首先，在HTML代码中创建一个二级菜单的无序列表。例如：

    <ul class="submenu">
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
        <li><a href="#">菜单5</a></li>
    </ul>

接下来，在CSS中定义样式，将菜单项设置为浮动状态，并将菜单容器宽度设置为合适的大小。例如：

    .submenu {
        width: 300px;
    }
 
    .submenu li {
        float: left;
        width: 100px;
    }

此时，我们可以看到所有的二级菜单项都被水平排列在一行中。为了实现多列布局，我们添加一个伪类选择器，并在其中定义新的样式。例如：

    .submenu li:nth-of-type(3n+1) {
        clear: left;
    }
 
    .submenu li {
        width: 90px;
        padding: 10px;
        background-color: #eee;
        border: 1px solid #ccc;
        margin-right: 10px;
        margin-bottom: 10px;
    }

在上面的代码中，我们定义了第3个、第6个、第9个…等“间隔3个为一列”的菜单项要清除浮动（即开始新的一列），并将菜单项的样式设置为包括宽度、内边距、背景色、边框、外边距等属性。

通过这种方式，我们就可以实现简单的二级菜单多列布局。