Web前端二级菜单的两个关键问题

最近在学前端，发现前端真心比后端头大！总是出现这边问题解决了，结果另一个问题出来了。今天终于摸索出来了关于写二级菜单的两个关键点，本文将记录下来，提供参考！

---

1. 问题一：
   二级菜单中，二级菜单容器挤扩父容器。
2. 原因：
   父容器没有固定高度。
3. 解决：
   给父容器固定一个高度，当父容器无法容纳二级菜单时会让二级菜单悬浮。

---

1. 问题二：
   二级菜单中，当问题一解决后会出现二级菜单会挤压后续元素。

2. 原因：
   因为它是父容器装不下二悬浮出来的，因此和它会挤压后续元素。

3. 解决：
   现在可以把父容器的高度给注释掉，并将父容器设定为相对定位;其次，将二级菜单容器设置为绝对定位。

---

1. 问题三：
   当第二个问题解决以后，你的二级菜单容器的下层有可获得焦点的元素时，比如按钮，链接，那么，你的光标移动到此处时，这些元素会自动获得焦点，这个位置你的二级菜单将失去焦点。

2. 原因：
   这是一个css的层叠问题。不做细说，自行研究。

3. 解决：
   就觉这个问题，可以用z-index这个属性来解决，具体用法参看相关文档，在此是针对二级菜单容器设定。

---

好了，研究了这麽久的前端布局，总之，问题多多 ，需要耐心学习，希望对新人有用！