Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo.
- The sub-menu expands horizontally
- The logo is positioned below the collapsed navigation bar
- The sub-menu will expand out of the navigation bar, pushing down the position of the logo
Main navigation:
<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>
An example showcasing this concept can be found here: http://jsfiddle.net/GSfpj/11/, along with the CSS code used.
Instead of having the sub-menu expand under the logo, my goal is to push the logo downwards and place the sub-menu between the parent navigation and the logo.
If possible, I would like to achieve this using only CSS. Any guidance on how to accomplish this would be highly appreciated :)