纯 CSS 响应式水平滚动菜单布局
Horizontal-to-Scrollable menu 是 Pure.CSS 中的一种响应式菜单栏，它将水平菜单栏更改为水平可滚动菜单栏。它用于使菜单栏在网站宽度随设备增加或减少时做出响应，例如平板电脑、智能手机等。 Pure.CSS Horizontal-to-Scrollable 菜单不需要任何 JavaScript 函数，它的内置的 CSS 类就足够了。
类：创建此布局需要下面提到和描述的类。
- 纯菜单： 它是生成水平菜单的默认类。它可以包含列表形式的菜单项和标题。
- pure-menu-horizontal ：它是添加到默认垂直“纯菜单”以使其成为水平菜单的类。
- pure-menu-list：它是包含菜单项的无序列表的类。此列表中的列表项必须具有类“pure-menu-item ”。
- pure-menu-item：它是添加到此列表内的列表项的类。
- pure-menu-heading：为菜单列表内外的标题添加的类。默认情况下，它将里面的文本大写。
- pure-menu-scrollable：当网站的宽度不适合菜单大小时，使纯菜单水平滚动或轻弹的类。
- pure-menu-link ：它是添加到菜单项内链接的类。
句法：
示例 1：此示例演示了一个简单的水平可滚动菜单栏。
HTML
Responsive horizontal-scrollable menu
HTML
Responsive horizontal-scrollable menu
输出：
示例2：下面的代码演示了当网站宽度减小到72em时，菜单栏中的横向可滚动列表项将与标题分离。我们应该使用@media() 规则来检测网站宽度的变化。 @media() 规则下的代码将在条件变为“真”时执行。
HTML
Responsive horizontal-scrollable menu
输出：
