I am in need of assistance with my website's navigation. I am looking to implement a horizontal navigation bar that, when hovered over, will reveal a dropdown sub-navigation with various sections (left and right alignment). Each section will have two horizontal headings with vertical sub-navigation links underneath. It may be a bit challenging for me to explain clearly, so please refer to the attached image for a visual representation.
(Unfortunately, I do not have enough reputation to directly upload an image on this platform.)
When hovering over "Heading 1," it should display two horizontal subheadings (Sub Head 1 & 2).
Beneath Subhead1 & 2 will be clickable vertical links that direct users to different pages.
(I forgot to include the link to the demo site). http://jsfiddle.net/8La4k57q/
<nav id="nav" role="navigation">
<ul>
<li>
<a href="#" aria-haspopup="true">Heading 1</a>
<ul>
<a href="#" aria-haspopup="true">Sub Heading 1</a>
<li><a href="#">Nav1</a></li>
<li><a href="#">Nav2</a></li>
<li><a href="#">Nav3</a></li>
<li><a href="#">Nav4</a></li>
<a href="#" aria-haspopup="true">Sub Heading 2</a>
<li><a href="#">Nav5</a></li>
<li><a href="#">Nav6</a></li>
<li><a href="#">Nav7</a></li>
</ul>
</li>
</ul>
#nav > a
{
display: none;
}
#nav li
{
position: relative;
}
#nav > ul
{
height: 3.75em;
}
#nav > ul > li
{
width: 25%;
height: 100%;
float: left;
}
#nav li ul
{
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul
{
display: block;
}
Thank you