html - 使菜单不会弄乱我的页面布局

Question

所以我在页面中间的某些元素上有一个下拉菜单。此菜单仅适用于 html 和 css。现在没有任何悬停，菜单项看起来像这样:http://prntscr.com/3es3n8 .

悬停时看起来像这样:http://prntscr.com/3es3y2 .

现在悬停本身工作正常，我可以很好地设置子元素的样式。我的问题是子元素是否有可能实际悬停在其他元素上。我知道 z-index 应该做这样的事情，但我不确定如何实现它。我会尝试发布尽可能多的代码，但该站点已经在 ModX 中。

对于所有额外的代码，我很抱歉，但情况的总体思路应该在那里。 http://jsfiddle.net/C8sBp/1/

    <div class="row">
            <div class="small-12 large-12 columns">
              <ul class="small-block-grid-1 large-block-grid-4">
                <li>

<div class="icon">
 <a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
 </a>
</div>


  <div class="text">
    <h2>
<nav>
    <ul>
        <li>
           <a href="producten/producten/" title="Kunsmest">
             Kunsmest 
           </a>
           <ul>
              <li>
                 <a href="#" title="lorem">
                    </a><ul><a href="#" title="lorem"></a><li class="first"><a href="#" title="lorem"></a><a href="producten/producten/test" title="test">test</a></li>
</ul>

              </li>
           </ul>
        </li>
    </ul>
</nav>
</h2>
    <p>

</p>
<a href="producten/producten/" class="more" title="Kunsmest">Meer over Kunsmest</a>
  </div>                  

</li>
<li>

<div class="icon">
 <a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
 </a>
</div>


  <div class="text">
    <h2>
<nav>
    <ul>
        <li>
           <a href="producten/zaden" title="Zaden">
             Zaden 
           </a>
           <ul>
              <li>
                 <a href="#" title="lorem">

                 </a>
              </li>
           </ul>
        </li>
    </ul>
</nav>
</h2>
    <p>

</p>
<a href="producten/zaden" class="more" title="Zaden">Meer over Zaden</a>
  </div>                  

</li>
<li>

<div class="icon">
 <a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
 </a>
</div>


  <div class="text">
    <h2>
<nav>
    <ul>
        <li>
           <a href="producten/handelsartikelen" title="Handelsartikelen">
             Handelsartikelen 
           </a>
           <ul>
              <li>
                 <a href="#" title="lorem">

                 </a>
              </li>
           </ul>
        </li>
    </ul>
</nav>
</h2>
    <p>

</p>
<a href="producten/handelsartikelen" class="more" title="Handelsartikelen">Meer over Handelsartikelen</a>
  </div>                  

</li>
<li>

<div class="icon">
 <a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
 </a>
</div>


  <div class="text">
    <h2>
<nav>
    <ul>
        <li>
           <a href="producten/veevoer/" title="Veevoer">
             Veevoer 
           </a>
           <ul>
              <li>
                 <a href="#" title="lorem">
                    </a><ul><a href="#" title="lorem"></a><li class="first"><a href="#" title="lorem"></a><a href="producten/veevoer/biofood" title="pietjes eten">pietjes eten</a></li>
</ul>

              </li>
           </ul>
        </li>
    </ul>
</nav>
</h2>
    <p>

</p>
<a href="producten/veevoer/" class="more" title="Veevoer">Meer over Veevoer</a>
  </div>                  

</li>
<li>


  <div class="text">
    <h2>
<nav>
    <ul>
        <li>
           <a href="diensten" title="Diensten">
             Diensten 
           </a>
           <ul>
              <li>
                 <a href="#" title="lorem">

                 </a>
              </li>
           </ul>
        </li>
    </ul>
</nav>
</h2>
    <p>

</p>
<a href="diensten" class="more" title="Diensten">Meer over Diensten</a>
  </div>                  

</li>
              </ul>
            </div>
          </div>

Answer 1

有多种解决方案，我已经将您的代码配对一些以使解决方案更清晰一些，但请看一下

http://codepen.io/dave_agilepixel/pen/cDtLk

我不会重复该元素，也不会在

周围使用

包装器，如果您可以避免它，如果您需要 h2 进行样式设置，则使用 css 或将代码更改为其他内容喜欢

<nav>
<ul>
<li><h2><a href="#">Object</a></h2></li>
</ul>
</nav>

还有图标可能更容易将它们作为 CSS 背景图像并使用 padding/background-position 在设计中设置它们。

希望对您有所帮助，在我的示例中，我使用了绝对位置和左侧位置来使子菜单正常工作，但您可以使用 display:none;或其他一些方法，如果您结合使用 opacity 和 top，那么您还可以添加 css3 transitions 以使其看起来很活泼。