新颖的CSS下拉/Megamenu

Question

嗨，我想创造一种新型的导航下拉(新的，因为我从来没有见过它)。

基本上，当我悬停在导航项目上时，下拉框应该出现在导航器下面。普通下拉列表的不同之处在于，我希望这个下拉列表包含所有navs子项(而不仅仅是属于悬停项的项)。因此，在我的代码示例中，如果一个在Nav 1上盘旋，那么所有的项目-我都会出现。

<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>

备注：下拉式应该与导航相同的宽度，每个导航项目的链接应该出现在它下面。我附上了一个草图！

我曾考虑过在UL中放置一个包含下拉列表的div，并将其显示在ul.hover上，但这将无法验证，并且您将无法锁定李被悬停的目标。

如果有人能让我知道这将是很棒的，那么使用css就不可能做到这一点。

抱歉，如果这看起来像漫不经心.希望有人能理解我在追求什么！

Answer 1

所以在导航的任何部分盘旋都显示了所有的子级别？

下面是基本功能的小提琴；然后您需要使用CSS对其进行样式化。

例如

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

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

(Google上有数百个例子)