jquery - 新颖的 CSS 下拉菜单/Megamenu

Question

您好，我想创建一种新型的导航下拉菜单(新的，因为我以前从未见过)。

基本上，当我将鼠标悬停在导航项上时，导航下方会出现一个下拉框。与普通下拉菜单的不同之处在于，我希望此下拉菜单包含所有导航子元素(而不仅仅是属于悬停元素的元素)。所以在我的代码示例中，如果将鼠标悬停在导航 1 上，那么所有元素 a-i 都会出现。

<ul>
            <li><a href="#">Nav 1</a>
                <ul>
                    <li><a href="#">item a</a></li>
                    <li><a href="#">item b</a></li>
                    <li><a href="#">item c</a></li>
                </ul>
            </li>
            <li><a href="#">Nav 2</a>
                <ul>
                    <li><a href="#">item d</a></li>
                    <li><a href="#">item e</a></li>
                    <li><a href="#">item f</a></li>
                </ul>
            </li>
            <li><a href="#">Nav 3</a>
                <ul>
                    <li><a href="#">item g</a></li>
                    <li><a href="#">item h</a></li>
                    <li><a href="#">item i</a></li>
                </ul>                   
            </li>
        </ul>

注意:下拉菜单的宽度应与导航相同，每个导航项的链接应显示在其下方。 I've attached a sketch!

我曾考虑过在 UL 中放置一个包含下拉列表的 div 并将其显示在 ul.hover 上，但这样就无法验证，您将无法定位悬停在哪个 li 上。

仅使用 css 可能无法实现此目的，如果有人可以告诉我那会很棒。

对不起，如果这看起来像是漫无边际......希望有人能理解我在追求什么!

Answer 1

所以将鼠标悬停在导航的任何部分上会显示所有子级别？

这是一个 jsfiddle基本功能；然后您需要使用 CSS 对其进行样式设置。

例如

http://www.alistapart.com/articles/hybrid/

http://htmldog.com/articles/suckerfish/dropdowns/

(Google 上有数百个示例)