菜单项未正确显示为超级菜单
我需要制作一个类似于下图中显示的大型菜单
到目前为止，我已经能够在某种程度上使其成为jsFiddle HERE的例子。
到目前为止，我遇到了一些设计问题和一个功能问题。
当我尝试隐藏每个下拉菜单//$(this).find(".nav-info").hide();的默认文字时，菜单4＆amp; 5没有显示在右侧。
我实际上正在尝试创建一个与此website类似的菜单。 一个这个网站，他们还显示父菜单的默认文本，我实际上不需要。
我修改了脚本以显示它为父菜单ONE，TWO找到的子菜单的第一个li但是为MENU FOUR和FIVE创建了alighnment问题。
如果有人可以帮我解决这个问题，我将不胜感激......
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;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> <a href="..capabilities">Parent Menu TWO</a>
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here 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="../-businesses">FOUR</a>
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5"><a href="../sustainability">FIVE</a>
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
2 个答案:
答案 0 :(得分：1)
在文档的开头添加以下内容，
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
并使用Rachel Reveley建议的方法。
li:hover ul {display: block;}
该代码在旧版浏览器上添加了对HTML 5和CSS3的支持。它似乎对我来说很完美。
答案 1 :(得分：0)
除非您支持IE6，否则您不需要JavaScript来制作下拉菜单。
如果您将结构更改为更像这样的内容
<ul>
<li><a href="">Click me</a>
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
您只需使用CSS
即可li:hover ul {display: block;}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？