CSS下级联菜单在网页设计中是非常常见的一种交互方式。它可以在一个菜单选项下展开多个不同的子选项，让用户快速选择所需要的内容。在下面的代码示例中，我们将通过CSS来实现一个简单的级联菜单。

/* 清除默认样式 */
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
/* 级联菜单样式 */
.menu {
width: 200px;
background-color: #f0f0f0;
font-size: 14px;
}
.menu >li {
position: relative;
}
.menu >li >a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu >li >ul {
position: absolute;
top: 100%;
left: 0;
display: none;
overflow: hidden;
background-color: #fff;
border: 1px solid #ccc;
}
.menu >li:hover >ul {
display: block;
}
.menu >li >ul >li >a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.menu >li >ul >li:hover >a {
background-color: #f0f0f0;
}

以上代码中我们使用了一个无序列表来实现级联菜单。首先清除了默认样式，然后设置了菜单的宽度、背景色和字体大小。

在每个菜单选项中，我们设置了它的position属性为relative，这样就可以在子选项中使用绝对定位来让它们出现在菜单选项下面。菜单选项中的链接使用了块级元素，并设置了内边距、文字颜色和去除了下划线。

菜单选项下面的子菜单中我们设置了绝对定位、背景色、边框和默认隐藏。在菜单选项悬停时，使用CSS选择器:hover来显示当前菜单选项下的子菜单。

子菜单的链接也使用了块级元素，并设置了内边距、文字颜色和去除了下划线。当鼠标悬停在子菜单的链接上时，我们使用CSS选择器:hover来设置它背景色。

通过以上代码，我们就可以轻松地实现一个简单的CSS下级联菜单了。