Question

您好我想创建一种新类型的导航下拉菜单（新的，因为之前我还没有看到它）。

基本上，当我将鼠标悬停在导航项目上时，导航栏下方会出现一个下拉框。与正常下拉列表的不同之处在于，我希望此下拉列表包含所有导航子项（而不仅仅是属于悬停项的项）。所以在我的代码示例中，如果要将鼠标悬停在Nav 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!

我曾考虑将包含该下拉列表的div放在UL中并将其显示在ul.hover上，但之后将无法验证，您将无法确定哪些li正在被徘徊。

如果有人能让我知道那会很棒的话，可能无法用css实现这一点。

对不起，如果这看起来像是漫无目的......希望有人能理解我的目标！

Answer 1

因此，将鼠标悬停在导航的任何部分都会显示所有子级别？

这是jsfiddle的基本功能;然后你需要使用CSS来设置它。

例如

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

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

（Google上有数百个例子）

新颖的CSS下拉/ Megamenu

1 个答案: