Question

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

现在悬停本身工作正常，我可以很好地设置子元素的样式。我的问题是，如果子元素可能实际悬停在其他项目上。我知道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背景图像并使用填充/背景位置在设计中进行设置。

我希望有帮助，在我的例子中我使用了绝对位置和左边的子菜单，但你可以使用display：none;或者其他一些方法，如果你使用不透明度和顶部的组合，那么你也可以添加css3过渡以使它看起来像爵士乐。

制作菜单不会弄乱我的页面布局

1 个答案: