<section class="main-wrapper">
<nav class="main-nav" role="navigation">
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">Stuff</a>
<span class="subnav">
Subnavs here
<nav class="sub-navigation" role="sub-navigation">
<a class="subnav-item" href="#">Things</a>
<a class="subnav-item" href="#">Sub stuf</a>
<a class="subnav-item" href="#">more</a>
</nav>
</span>
<a class="nav-item" href="#">Contact Us</a>
</nav>
</section>
body {
color: #BADA44;
background: #4e4e4e;
font-size: 1.3em;
font-family: 'Myriad Pro', 'Sans Serif', Arial;
box-sizing: border-box;
margin: 0
}
a {
color: inherit;
text-decoration: none;
}
.main-nav, .sub-navigation {
background: #3D3D3D;
}
.nav-item, .subnav {
padding: 10px;
}
.subnav-item {
padding: 4px 20px;
}
.nav-item:hover, .subnav-item:hover {
background: #232323;
color: #EFEFEF;
}
.main-wrapper {
background: #1F1F1F;
width: 80%;
max-width: 1000px;
height: 100%;
position: absolute;
left: 10%
}
.subnav {
postion: relative;
display: inline-block;
}
.subnav-item {
display: block;
}
.subnav nav {
display: none;
position: absolute;
}
.subnav:hover nav {
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.