菜单项显示不正确的大型菜单

Question

我需要做类似一个大型菜单，一个作为显示图像低于

到目前为止，我已经能够使其工作在一定程度上例如在jsFiddle HERE 。

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

当我尝试隐藏每个下拉菜单//$(this).find(".nav-info").hide();的默认文本，然后菜单4 & 5不显示在右侧。

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

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

我将不胜感激，如果一些能帮助我解决这个问题...

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> 

Answer 1

除非你是支持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;} 

Answer 2

添加文档的头以下，

<!--[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的支持。它似乎对我来说非常完美。