重学前端之导航下拉菜单（一）

写在前面的话： 最近因为工作需要，加上想巩固一下自己的JavaScript基础知识，所以打算从实际工作中着手，从头开始撸一遍JS。 但不是照着书本里的章节顺序，而是以网页形式，从页头、导航、banner图…页脚，重新梳理一遍，将每一个特效的需求、思路、逻辑及涉及到的知识点做一次总结。刚好也上过winter老师的《重学前端》课程，由于JS基础知识薄弱，课程中大部分章节没看，正好借此机会，完善自己。
本系列里的各种实现效果并非完全原创，自己也在学习的过程中，不可避免的会借鉴一些别人的思路，例如：他人用jQuery实现出来的效果，我会参照实现逻辑，用原生JS实现一遍，但我会将原作标示出来。
本系列命名：《重学前端系列》
本系列参照： 腾讯官网首页面

实现效果

效果需求：

• 鼠标触及导航项时，显示二级菜单
• 鼠标触及导航项时，白色背景拉长
• 【首页】项始终高亮
• 随着鼠标移动，对应项高亮
• 鼠标离开，导航高度回收，二级菜单隐藏，回到【首页】项高亮

实现思路：

以前写过一个纯css的导航下拉菜单，虽然也能实现，但要想效果更好，JS和CSS3的结合是最完美的选择，但前提是对应用户的浏览器版本要给力

• 当鼠标经过导航项时，JS要做两件事，将白色背景拉长和显示二级菜单，css3要做的就是高亮显示选中项，下面用实际代码来进行拆解分析
• 鼠标触及后背景拉长并不是使用名为riped-menu-list父元素背景，而是设置一个名为riped-navBg-hover来充当背景，先在css中为其添加高度，背景颜色，将其隐藏，鼠标触及时展开

<div class="riped-nav">
                <ul class="riped-menu-list">
                    <li class="riped-menu-item"><a class="riped-menu-txt" href="#">首页</a></li>
                    <li class="riped-menu-item"><a class="riped-menu-txt" href="#">新闻中心</a></li>
                    <li class="riped-menu-item"><a class="riped-menu-txt" href="#">重要活动</a></li>
                    <li class="riped-menu-item">
                        <a class="riped-menu-txt" href="#">科研活动</a>
                        <ul class="riped-sub-list">
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li