CSS伸缩菜单设置可以让网页设计更加灵活，让用户可以在不同设备上获得更好的浏览体验。以下是一些常见的伸缩菜单设置方法。

/* 水平菜单 */
ul {
display: flex;
justify-content: space-between;
}
/* 垂直菜单 */
ul {
display: flex;
flex-direction: column;
}
/* 响应式菜单 */
@media screen and (max-width: 768px) {
ul {
display: none;
}
.menu-toggle {
display: block;
}
}
/* 菜单切换效果 */
.menu-toggle {
cursor: pointer;
display: none;
}
.menu-open {
display: block;
}

上述代码中，我们使用了flex布局来设置水平和垂直菜单。因为flex布局可以方便地控制元素的排列方式和间距，所以很适合用来制作菜单。

另外，我们还加入了一个响应式菜单的设置，使得在手机或平板等小屏幕设备上，菜单可以被隐藏起来，只有在点击切换按钮后才会显示出来。这样既可以保证菜单的显示效果，又可以节省屏幕空间。

最后，我们还为菜单添加了一个切换效果。当用户点击切换按钮时，菜单会从隐藏状态切换到显示状态，切换效果更加自然。