在创建导航菜单时寻求帮助,导航栏位于站点徽标上方。我希望子菜单水平扩展出导航栏并将其自身定位在父导航栏和徽标之间。
- 子菜单是水平的
- 折叠时徽标位于导航栏下方
- 子菜单将展开到导航栏之外,并向下推徽标的位置。
主导航:
<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 中执行此操作,任何帮助将不胜感激:)