JavaScript实现伸缩菜单的关键知识点包括了HTML结构的设计、CSS样式的定义以及JavaScript脚本的编写，下面将详细介绍这些方面的知识：
HTML结构设计：
在给定的示例中，菜单的基本HTML结构是使用无序列表（ul）和列表项（li）来构建的。对于主菜单项来说，每个<li>元素代表一个菜单项，而子菜单则隐藏在具有嵌套<ul>的<li>中。这样的结构使得菜单项与子菜单项之间具有清晰的父子关系，这在JavaScript操作中非常重要。
CSS样式定义：
在示例中，CSS主要被用来设置菜单的外观以及隐藏和显示子菜单。比如，主菜单使用了固定宽度，并设置了背景颜色和文字颜色。对于鼠标悬停（hover）时的样式变化，如改变背景颜色和文字颜色，被用来提供用户交互的视觉反馈。
特别地，子菜单在默认情况下被CSS设置为不显示（display:none），这样的CSS类被称为.myHide。而显示子菜单的类是.myShow，它设置display:block，使得子菜单可见。通过改变类名，可以切换元素的显示与隐藏状态。
JavaScript脚本编写：
脚本部分使用了原生JavaScript，首先定义了一个change函数。这个函数通过this关键字获取到当前触发事件的DOM元素，也就是点击的菜单项（<li>元素）。随后，通过获取当前元素的父节点（<li>）的子节点列表中的第一个（<ul>），来操作子菜单。如果子菜单当前是隐藏状态（.myHide），则改变其类名为.myShow，实现显示；反之则隐藏。
页面加载完成后，一个window.onload事件触发器会被执行。这个事件加载了JavaScript代码来为每个含有子菜单的<li>元素绑定change函数。遍历所有子菜单项，并检查它们是否含有<ul>元素。如果含有，则为这些<ul>元素的父<li>元素的子<a>标签添加onclick事件监听器，绑定到change函数上。这样当用户点击主菜单项时，就可以触发change函数，进而切换子菜单的显示状态。
另外，页面中还有一些其他细节需要注意，比如在style标签中，注释符号使用的是HTML注释符号<!-- -->，这在纯CSS文件中是不常见的。同时，在script标签中定义了语言类型为"javascript"，而在现代HTML5标准中，script元素的language属性已经被废弃，可以直接书写JavaScript代码。
将这些知识点结合起来，可以实现一个简单而有效的伸缩菜单。开发者可以在此基础上进行扩展，比如增加动画效果，以提升用户体验。需要注意的是，在实际开发过程中，可能会使用更多现代的前端框架和库，如React、Vue或者Bootstrap等，这些框架提供了更多组件化、模块化的功能，可以更加高效地构建复杂的交互效果。然而，了解并掌握这些基本知识对于理解和使用现代框架仍然是非常有帮助的。
