Question

我有一个Mega菜单，显示两级菜单，它可以正常工作两个级别，但我需要添加级别3，如下图所示，三级打破设计和Grand Child One＆amp; Grand Child Two菜单以错误的方式显示

下面的图片展示了它现在如何出现＆amp;它是如何表现的。

小提琴示例http://jsfiddle.net/5eecT/33/ enter image description here

我一直在努力解决这个问题，但我无法做到这一点。

我很感激在这方面的帮助。

更新：

如果第3级需要任何HTML更改，那么对我来说没问题。

HTML CODE

<div class="menu-wrapper">
  <div class="navbar">

    <!--
<nav id="menu" class="menu">

<nav id="nav" class="nav">
-->
      <nav class="nav-wrapper" id="nav">
        <ul class="nav">
          <li> <a href=""> Home   </a> </li>
          <li>
            <a  href="#"> Parent One </a>
            <div class="dropdown has-panel" style="min-height: 130px;">
              <ul>
                <li>
                  <a href="#"> Child One</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img Child One]" class="media">
                    <span class="media-caption">
                      This is child one of parent menu one.  This is child one of parent menu one.  This is child one of parent menu one.  This is child one of parent menu one.
                    </span>
                  </div>
                </li>
                <li>
                  <a href="#">  Child Two  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img Child Two]" class="media">
                    <span class="media-caption">
                      This is child Two of parent menu one. 
                    </span>
                  </div>
                  <div class="dropdown has-panel" style="min-height: 130px;">
                    <ul>
                      <li>
                        <a  href="#">Grand Child One</a>
                        <div class="dd-panel">
                          <img alt="Image" src="http://placehold.it/100x60&text=[Grand One]" class="media">
                          <span class="media-caption">
                            This is  Grand child one of Child One. This is  Grand child one of Child One. This is  Grand child one of Child One.
                          </span>
                        </div>
                      </li>
                      <li>
                        <a  href="#">Grand Child Two</a>
                        <div class="dd-panel">
                          <img alt="Image" src="http://placehold.it/100x60&text=[Grand Two]" class="media">
                          <span class="media-caption">
                            This is  Grand child Two of Child One. 
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a href="#">  Child Three  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 5]" class="media">
                    <span class="media-caption">
                      This is child Three of parent menu one.
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
             <a href="#">  Parent Two   </a>
            <div class="dropdown has-panel" style="min-height: 130px;">
              <ul>
                <li>
                  <a href="#">  Child One  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 6]" class="media">
                    <span class="media-caption">
                      This is child One of parent menu Two.
                    </span>
                  </div>
                </li>
                <li>
                  <a href="#">  Child Two  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 7]" class="media">
                    <span class="media-caption">
                      This is child Two of parent menu Two.
                    </span>
                  </div>
                </li>
                <li>
                   <a href="#">  Child Three  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 8]" class="media">
                    <span class="media-caption">
                      This is child Three of parent menu Two.
                    </span>
                  </div>
                </li>
                <li>
                 <a href="#">  Child Four  </a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 9]" class="media">
                    <span class="media-caption">
                     This is child Four of parent menu Two.
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a  href="#"> Parent Three</a>
            <div class="dropdown has-panel" style="min-height: 130px;">
              <ul>
                <li>
                  <a href="#"> Child One</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 10]" class="media">
                    <span class="media-caption">
                     This is child One of parent menu Three.
                    </span>
                  </div>
                </li>
                <li>
                   <a href="#"> Child Two</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 11]" class="media">
                    <span class="media-caption">
                     This is child Two of parent menu Three.
                    </span>
                  </div>
                </li>
                <li>
                   <a  href="#"> Parent Four</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 12]" class="media">
                    <span class="media-caption">
                      This is child One of parent menu Four.
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a  href="#"> Parent Four</a>
            <div class="dropdown has-panel" style="min-height: 130px;">
              <ul>
                <li>
                 <a  href="#"> Child One</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 13]" class="media">
                    <span class="media-caption">
                     This is child One of parent menu Four. 
                    </span>
                  </div>
                </li>
                <li>
                  <a  href="#"> Child Two</a>
                  <div class="dd-panel">
                    <img alt="Image" src="http://placehold.it/100x60&text=[img 14]" class="media">
                    <span class="media-caption">
                      This is child Two of parent menu Four. </span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a  href="#"> Parent Five</a>
          </li>
          <li>
            <a  href="#"> Parent SIX</a>
          </li>
        </ul>
      </nav>

  </div>
</div>

Answer 1

<强> HTML

<div class="dropdown has-panel" style="position:relative;width:inherit;margin:0">
                    <ul>
                      <li>
                        <a  href="#">Grand Child One</a>

我评论了几行js并添加了一些，但即使我不记得我改变了什么检查Fiddle 我想这就是你想要的。可能有一些悬停问题，你只需要修复你的身高

多级菜单未正确显示

1 个答案: