CSS是一种用来控制网页外观的语言，被广泛应用于前端开发中。在网页中，菜单是一个常见的需求，它可以让用户在不同的选项之间进行选择，从而实现网页的跳转或功能触发。在本文中，我们将介绍如何使用CSS来控制menu的展开效果。

/* 首先，我们需要一个菜单容器的HTML结构，可以用ul和li标签来实现 */<ul ><li>菜单1</li><li>菜单2</li><li>菜单3<ul ><li>子菜单1</li><li>子菜单2</li></ul></li></ul>/* 上述代码定义了一个包含三个一级菜单和一个子菜单的菜单，其中子菜单是以ul和li的嵌套结构形式展示的 *//* 接下来，我们会使用到CSS来定义该菜单的样式 *//* 设置一级菜单的样式 */.menu li {display: inline-block; /* 使菜单项水平排列 */padding: 10px; /* 设置菜单项内边距 */position: relative; /* 设置相对定位，为后续子菜单的绝对定位做准备 */}/* 设置子菜单的样式 */.submenu {display: none; /* 设置子菜单初始为不可见状态 */position: absolute; /* 设置绝对定位，用于实现子菜单的展开效果 */}/* 当鼠标悬停在一级菜单时，展开子菜单 */.menu li:hover .submenu {display: block;}/* 最后，我们需要定义子菜单的位置，这可以使用left和top属性来实现 */.submenu {left: 0; /* 使子菜单紧靠一级菜单左侧 */top: 100%; /* 使子菜单位于一级菜单底部 */}

上述CSS代码实现了鼠标悬浮在一级菜单时，子菜单展开的效果。通过设置display属性和hover选择器，我们可以很方便地控制菜单的展现效果。此外，我们还设置了子菜单的位置，让它们紧贴一级菜单并位于其底部。