Mega菜单问题 [英] Mega Menu Issues

问题描述

我有一个巨型菜单，我一直有两个问题。

1. 我似乎无法保持悬浮状态


2. 触发巨型菜单的标题标签似乎具有他们所在的容器的宽度。这会导致巨型菜单弹出

$ b

我已经在这里为大型菜单张贴了我当前的代码： http://www.boyga.com/mega-menu/





我正在使用hoverintent插件。

解决方案

问题＃2很容易解决。将此CSS规则添加到样式表中：

  ul＃Top-Nav {
 display：inline-block; 
} 
  

问题＃1几乎一样简单。这是更多的CSS变化。因为您的子菜单从< li >但不是< a> 下降，您需要更改CSS规则涉及 a：hover 和 a：active ：

  ul＃Top-Nav li：hover a {color：＃1E90FF; text-decoration：none;} 
 ul＃Top-Nav li：hover a {background： 1E90FF url（arrow.png）no-repeat right center; color：#fff;} 
 ul＃Top-Nav li：active a {background：＃1E90FF url（arrow.png）no-repeat right center; color ：#fff;} 
  

这适用于我，至少在Chrome上。您可能（读取：可能）在其他浏览器上遇到问题，其中：hover 和：active 伪类不起泡。




I have a mega menu I've been having two issues with.

1. I can't seem to keep the hover state active when I'm hovering over each section.
2. The header tags that trigger the mega menu seem to have a width of the container that they are in. This causes the mega menu to pop up even if you don't rollover it visually.

I posted my current code for the mega menu here: http://www.boyga.com/mega-menu/

I'm using the hoverintent plug-in.

解决方案

Issue #2 is easy to fix. Add this CSS rule to your stylesheet:

ul#Top-Nav {
    display: inline-block;
}

Issue #1 is almost as simple. It's more CSS changes. Because your submenu descents from the <li> but not the <a>, you need to change your CSS rules that involve a:hover and a:active:

    ul#Top-Nav li:hover a{color:#1E90FF;text-decoration:none;}
    ul#Top-Nav li:hover a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}
    ul#Top-Nav li:active a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}

This works for me, at least on Chrome. You may (read: probably) will have issues on other browsers, where the :hover and :active pseudo-classes don't bubble up.

这篇关于Mega菜单问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！