如何用原生JS制作鼠标悬停下拉菜单？

本文共计301个文字，预计阅读时间需要2分钟。

JS实现悬浮下拉菜单，这是前端面试中常见的场景题，原理就是修改菜单项的`display`属性值。具体来说，就是将`display`属性从`none`改为`block`，从而实现菜单项的展开。重点注意以下几个部分：

1. 给每个`section`设置浮动。

2.实现继承属性。

3.其他细节处理。

JS实现悬停下拉菜单，这个是前端面试中遇到的场景题，原理就是修改菜单样式的display属性的属性值从none=>block，具体实现见下，重点关注下面几个部分。

• 给每个section设置浮动。
  
• 将可继承属性设置在section父盒子上，字体相关的属性。
  
• 设置悬停时，悬停在section父盒子上，子元素head背景改变；也可以直接悬停在head类，写作`.head:hover`。但是会出现一个问题就是当鼠标悬停在li上的时候head会变回最初的样子，因此推荐将hover放在section上。
  
• 但是menu展示只能悬停在父盒子section上，因为本身不展示（不能悬停在head上，head不是父盒子）。