首先，我们需要HTML代码来创建菜单结构。我们可以使用无序列表（
- ）和列表项（
- ）来实现。例如：
<ul><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul>
接下来，我们需要一些CSS代码来隐藏或显示菜单项。我们可以使用CSS选择器和属性来实现。例如：/* 默认隐藏所有菜单项的子列表 */ul li ul {display: none;}/* 当鼠标悬停在菜单项上时，显示子列表 */ul li:hover ul {display: block;}
这样，在网页上显示时，所有菜单项的子列表都会被隐藏起来，只有当鼠标悬停在菜单项上时，其对应的子列表才会被显示出来。
如果希望在未悬停时，某些菜单项的子列表是显示的，可以为这些项添加一个“打开”类（如 ），并使用以下CSS代码：/* 默认显示带有“打开”类的菜单项的子列表 */ul li.open ul {display: block;}
这样，在网页上显示时，所有带有“打开”类的菜单项的子列表都会被显示出来。通过JavaScript代码，我们可以在页面加载时动态添加或删除这些类，以达到需要折叠或打开的效果。
最后，我们需要给菜单项和子列表添加样式，如背景色、边框、字体大小等。例如：/* 菜单项样式 */ul li {display: inline-block;padding: 10px;background-color: #ddd;border: 1px solid #ccc;}/* 子列表样式 */ul li ul {position: absolute;top: 100%;left: 0;padding: 10px;background-color: #eee;border: 1px solid #ccc;z-index: 1; /* 始终显示在其他元素之上 */}
这样，我们就可以创建一个基本的CSS折叠菜单了。在实际项目中，我们还可以添加更多的样式和效果，使菜单更加美观和易用。
上一篇：css把超链接文字
下一篇：css指上去字变红
