html - 如何创建位于父项和 Logo 之间的水平子菜单

Question

寻求有关创建导航菜单的帮助，其中导航栏位于站点 Logo 上方。我希望子菜单水平扩展到导航栏之外，并将其自身定位在父导航栏和 Logo 之间。

• 子菜单是横向的
• 折叠时 Logo 位于导航栏下方
• 子菜单会展开到导航栏之外，并下推 logo 的位置。

主导航:

<nav>
    <div class="container">
        <ul class="menu">
            <li> <a href="#">One</a>

                <ul class="sub-menu">
                    <li><a href="#">Sub Menu One</a>
                    </li>
                    <li><a href="#">Sub Menu Two</a>
                    </li>
                    <li><a href="#">Sub Menu Three</a>
                    </li>
                    <li><a href="#">Sub Menu Four</a>
                    </li>
                    <li><a href="#">Sub Menu Five</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Two</a>
            </li>
            <li> <a href="#">Three</a>
            </li>
            <li> <a href="#">Four</a>
            </li>
            <li> <a href="#">Five</a>
            </li>
        </ul>
        </div>
    </div>
</nav>
<div class="logo"></div>

我在这里做了一个模拟示例:http://jsfiddle.net/GSfpj/11/包括我一直在玩的 CSS。

我希望能够将 Logo 向下推并将子菜单定位在父导航和 Logo 之间，而不是在 Logo 下方展开子菜单。

如果可能的话，我更愿意用纯 CSS 来做这件事，任何帮助将不胜感激:)

Answer 1

你也许可以这样做:

ul:hover {padding-bottom:25px;}

...虽然，老实说，我不认为这种行为无论如何都很好。为什么不在 Logo 顶部显示子菜单？