Question

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

子菜单是水平的
折叠后，徽标位于导航栏下方
子菜单将从导航栏中展开，并向下按下徽标的位置。

主要导航：

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

我希望能够将徽标向下推，并将子菜单放在父导航和徽标之间，而不是在徽标下方扩展子菜单。

如果可能，我宁愿在纯CSS中执行此操作，我们将非常感谢任何帮助：）

Answer 1

你也许可以这样做：

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

......但是，老实说，我认为这种行为并不好看。为什么不在徽标顶部显示子菜单？

Answer 2

以下是一个有效的例子：http://jsfiddle.net/GSfpj/27/

虽然有一些我不喜欢的事情：

由于需要从DOM布局中取出子菜单以使主菜单正确显示，因此需要将它们设置为position: absolute。因此，你被迫指定高度，这使事情有点草率，难以重复使用。
如果您制作<li> s position:relative，则会在子菜单之前留出额外的空间。如果您改为相对于父<ul>定位子菜单，则子菜单可能甚至不会与其父<li>重叠，这也会导致:hover状态出现问题。
由于布局不是动态完成的（您需要明确指定高度和填充），当您将鼠标悬停在没有子菜单的菜单项上时，最终会出现空白。

在没有进入javascript或不同的标记（添加类来表示某些东西是否有子菜单等等）的情况下，你可以做很多事情来解决这些问题。

但是，它可以正常使用。

Answer 3

以下是您更新的feddle链接。你必须改变以下css：

ul.menu li {
    display:inline;
    padding:10px;
    position:relative;
    z-index:9999;
}
ul.menu li ul.sub-menu {
    position:absolute;
    margin:0;
    padding:0;
    background:#2f2f2f;
    width:300px;
}

如何创建父级和徽标之间的水平子菜单

3 个答案: