0

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

  • 子菜单是水平的
  • 折叠时徽标位于导航栏下方
  • 子菜单将展开到导航栏之外，并向下推徽标的位置。

主导航：

<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 中执行此操作，任何帮助将不胜感激:)

4

3 回答 3

0

这是您更新的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;
}
于 2013-06-03T05:43:40.017 回答
0

你也许可以做这样的事情：

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

......虽然，老实说，我不认为这种行为是不同的。为什么不在徽标顶部显示子菜单？

于 2013-06-03T02:53:09.620 回答
0

这是一个工作示例：http: //jsfiddle.net/GSfpj/27/

不过，有几件事我不喜欢这个：

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

如果不使用 javascript 或不同的标记（添加类来表示某物是否有子菜单等），您确实无法解决这些问题。

但是，它有效，因此请随心所欲。

于 2013-06-03T03:28:58.570 回答