菜单项目不能正常显示为超级菜单 [英] Menu items not showing up properly as a mega menu

问题描述

我需要制作一个类似于下图所示的大型菜单，如下图所示：

到目前为止，我已经能够在一定程度上在 jsFiddle HERE 。

到目前为止，我有一些设计问题和一个功能问题。

当我尝试隐藏每个下拉菜单的默认文本 // $（this）.find（。nav-info）。hide（）; 然后菜单4& 5没有出现在右侧。

我实际上正在尝试创建一个类似于网站。
一个这个网站，他们也显示了父母菜单的默认文本，我实际上不需要它。

我修改了脚本以显示其子菜单的第一个子菜单找到的父菜单ONE，TWO，但为菜单FOUR和FIVE创建了高亮度问题。
$ b

如果有人能帮我解决这个问题，我将不胜感激......

CODE

 < div class =container_16> 
< div class =nav-main grid_16> 
< div class =wrap-nav-media> 
< ul id =nav-top-media> 
<！ -  ONE  - > 
< li class =nav-item-1>< a href =.. company-overview> Parent Menu One< / a> 
 
< div style =display：none;类= 内NAV-媒体 > 
< ul> 
< li class =>< a class =currenthref =../ directors =sub-1-relative-1> sub-1-relative-1< / A> 
< / li> 
< li class =>< a class =currenthref =../ management-team =sub-1-relative-2> sub-1-relative- 2'; / A> 
< / li> 
< li class =last>< a class =currenthref =../ tems.html =sub-1-relative-3> sub-1-relative -3 LT; / A> 
< / li> 
< / ul> 
< div style =display：block; class =menu-page firstid =mega-sub-1-relative-1> < a href =../董事会title =董事会 =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-1-relative-1< / p> 
< / div> 
< / div> 
< div style =display：block; class =menu-pageid =mega-sub-1-relative-2> < a href =../ management-teamtitle =管理团队 =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-1-relative-2< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-1-relative-3> < a href =../ vision.htmltitle =Vision =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-1-relative-3< / p> 
< / div> 
< / div> 
< / div> 
< / li> 
<！ -  TWO  - > 
< li class =nav-item-2> < a href =..功能>父级菜单TWO< / a> 
 
< div style =display：none;类= 内NAV-媒体 > 
< ul> 
< li class =>< a class =currenthref =../ infrastructure =sub-2-relative-1> sub-2-relative-1< / A> 
< / li> 
< li class =>< a class =currenthref =.. capabilities / building =sub-2-relative-2> sub-2-relative-2< ; / A> 
< / li> 
< li class =last>< a class =currenthref =.. capabilities / rail =sub-2-relative-3> sub-2-relative- 3'; / A> 
< / li> 
< / ul> 
< div style =display：none; class =menu-page firstid =mega-sub-2-relative-1> < a href =../ infrastructuretitle =基础架构 =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-2-relative-1< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-2-relative-2> < a href =../ buildingtitle =建筑物 =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-2-relative-2< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-2-relative-3> < a href =/ railtitle =Rail =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-2-relative-3< / p> 
< / div> 
< / div> 
< / div> 
< / li> 
< li class =nav-item-3>< a href =../ projects> THREE< / a> 
< / li> 
< li class =nav-item-4> < a href =../- business> FOUR< / a> 
 
< div style =display：none;类= 内NAV-媒体 > 
< div style =display：block; float：right; class =menu-page nav-info> < a class =thumb =nofollowtitle =商家href =../ business> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> TEXT将会在这里...< / p> 
< / div> 
< / div> 
< ul> 
< li class => < a class =currenthref =2.html =sub-4-relative-1> sub-4-relative-1< / a> 
 
< / li> 
< li class => < a class =currenthref =1.html =sub-4-relative-2> sub-4-relative-2< / a> 
 
< / li> 
< / ul> 
< div style =display：none; class =menu-page firstid =mega-sub-4-relative-1> < a href =../ group.htmltitle = =nofollowclass =thumb> 
< img src =HLG-Mega-Menu_files / 20110602_1-ARG.jpgalt => 
< / a> 
 
< div> 
< p> TEXT将会在这里...< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-4-relative-2> < a href =../ advance-water-and-environmentawe.htmltitle =高级水与环境（AWE） =nofollowclass =thumb> 
< img src =HLG-Mega-Menu_files / 20121024_AWG-220x165.jpgalt =高级水与环境（AWE）> 
< / a> 
 
< div> 
< p> TEXT将会在这里...< / p> 
< / div> 
< / div> 
< / div> 
< / li> 
< li class =last nav-item-5>< a href =../ sustainability> FIVE< / a> 
 
< div style =display：none;类= 内NAV-媒体 > 
< div style =display：block; class =menu-page nav-info> < a class =thumb =nofollowtitle =href => 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p>这是默认文本，当我尝试隐藏它时，此菜单移动到左侧< / p> 
< / div> 
< / div> 
< ul> 
< li class =>< a class =currenthref = =sub-5-relative-1> sub-5-relative-1< / a> 
< / li> 
< li class =>< a class =currenthref = =sub-5-relative-2> sub-5-relative-2< / a> 
< / li> 
< li class =>< a class =currenthref = =sub-5-relative-3> sub-5-relative-3< / a> 
< / li> 
< li class =last>< a class =currenthref = =sub-5-relative-4> sub-5-relative-4< / a> 
< / li> 
< / ul> 
< div style =display：none; class =menu-page firstid =mega-sub-5-relative-1> < a href =/ safety.htmltitle = =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-5-relative-3< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-5-relative-2> < a href =/ environment.htmltitle =Environment =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-5-relative-2< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-5-relative-3> < a href =/ community.htmltitle =Community =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在这里显示sub-5-relative-3< / p> 
< / div> 
< / div> 
< div style =display：none; class =menu-pageid =mega-sub-5-relative-4> < a href =/ quality.htmltitle =Quality =nofollowclass =thumb> 
< div style =height：80px width：80px; background-color：yellow; float：right;> IMAGE< / div> 
< / a> 
 
< div> 
< p> Brief Contents将在此处显示sub-5-relative-4< / p> 
< / div> 
< / div> 
< / div> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

在文档头部添加以下内容

 <！ -  [if lt IE 9]> 
 



        

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.