小米首页导航

Question

老师你好，关于首页的顶部导航，如何像小米商城的效果一样，实现鼠标连续经过多个导航，下拉菜单的外框不发生变化，产品的内容发生改变，最后鼠标离开，下拉框才上去。

Answer 1

河畔一角 2020-07-21 16:02:39

这个可能要结合js来实现了，单纯html加css无法满足。现在的做法是给每个导航菜单item添加hover，所以鼠标切换到第二个上面就会出现收缩，然后再展开。那你要的效果就得给整个导航添加hover事件，这样先保证鼠标不移出去，下拉不会收起来。然后再根据鼠标事件获取不同的菜单，根据菜单加载对应的导航列表。