如何用CSS和jQuery实现一个侧滑导航菜单

1、给每个导航选项一个属性，保存楼层id；
2、每个楼层都有一个id；
3、监听页面滚动事件，如果当前滚动到某一个楼层，就更新导航选中。
不一定非要是id，主要是维护两者对应关系。

用 a:hover span 试试，如果你 css 非常熟，能处理好很多细节问题，有可能能行，不断的嵌套 a:hover span ，下面这个如果你看得明白的话可以试试：

<ul>
<li>
<a>
家用电器
<span>
<strong>生活电器</strong>
<ul>
<li><a>净化器</a></li>
<li><a>净水设备</a></li>
<li><a>电风扇</a></li>
</sapn>
</a>
</li>
</ul>

核心就是一个链接里面放一个span，然后这个span里面又放二级菜单的链接：
<a>一级菜单<span><ul>二级菜单</ul></sapn></a>

然后先把 span 用 display:none; 隐藏起来，当一级菜单的链接发生 a:hover 时，又把 span 的 display 设置为 block 使其可见。

纯 css 不上 js 并且：不用表格、条件注释的话，那上面我说的这些就是唯一的办法了。

另一种可能是：上面我说的这些根本做不到你想要的效果，因为我也没试过这么复杂的嵌套会出现什么预料之外的东西要处理，考虑各浏览器兼容问题，能否处理掉这些问题是未知的。

你至少需要解决：
IE6 下 a:hover span 无效(要让其生效需要设置一个多余的空背景，方法自行百度)
各种 z-index 问题
span 的复杂定位
其他莫名其妙的问题


最终结果一切未知，有兴趣的话可以自己试着写代码。

要使用 jQuery 创建三级菜单，您需要对以下概念和技术有基本的了解：
HTML 和 CSS：这些是网页的构建块，用于构建菜单内容和样式。
jQuery：这是一个流行的JavaScript库，它提供了一个方便易用的API来 *** 作网页的元素。
DOM（文档对象模型）：这是以对象的分层树的形式表示网页，jQuery使用它与页面的元素进行交互。
选择器和事件：jQuery 使用 CSS 样式的选择器来识别它将 *** 作的元素，并使用事件（如单击、悬停或按键）来触发其 *** 作。
基本JavaScript：jQuery是一个JavaScript库，因此对JavaScript语法和概念的基本了解对于有效地使用它是必要的。
要使用jQuery创建三级菜单，您需要使用HTML和CSS来定义菜单的结构和外观，并使用jQuery添加交互性和功能。例如，这可能涉及使用 jQuery 隐藏和显示菜单的不同级别，或突出显示当前选定的菜单项。
总的来说，使用jQuery创建一个三级菜单需要对Web开发技术有很好的理解，并且对jQuery和JavaScript有一些基本的了解。有了这些技能，您可以使用jQuery创建各种交互式菜单和其他Web应用程序。

---