<div class="row hide-for-small" id="mainNav">
<ul class="nav">
<li class="large-2 columns nav extended" id="behaviour"><a href="#">Pupil <br />Behaviour</a>
<ul>
<li><a href="about/me">Me</a></li>
<li><a href="about/contaxt">Contact</a></li>
<li><a href="about/contaxt">Contact</a></li>
<li><a href="about/contaxt">Contact</a></li>
</ul>
</li>
<li class="large-2 columns nav extended" id="workload"><a href="#">Managing <br />Workload</a>
<ul>
<li><a href="about/me">Me</a></li>
<li><a href="about/contaxt">Contact</a></li>
<li><a href="about/contaxt">Contact</a></li>
<li><a href="about/contaxt">Contact</a></li>
</ul>
</li>
<li class="large-2 columns nav" id="worklife"><a href="#">Worklife <br />Balance</a></li>
<li class="large-2 columns nav" id="relationships"><a href="#">Relationships <br />at Work</a></li>
<li class="large-2 columns nav" id="events"><a href="#">Life <br />Events</a></dliiv>
<li class="large-2 columns nav" id="evaluation"><a href="#">Self <br />Evaluation</a></li>
</ul>
</div>
#mainNav ul.nav {
height: 40px; width: 1000px;
margin: 10px auto;
}
#mainNav ul {
list-style-type: none;
}
#mainNav li {
height: 40px; width: 120px;
float: left;
clear: none;
text-align: left;
}
#mainNav a {
height: inherit; width: inherit;
padding: 12px;
display: block;
border-left: 1px #fff solid;
background: #9cf; color: white;
text-decoration: none;
}
#mainNav a:hover {
background: red;
}
#mainNav li.extended ul {
/*overflow: hidden; uncomment to restrict extended li to the width of parent element*/
}
#mainNav li.extended li {
position: relative;
margin-left: 10px; /*controls sideways shimmy */
clear: both;
overflow: hidden;
height: 0;
width: 300px;
-webkit-transition: all 0.5s;
}
#mainNav li.extended:hover li {
margin-left: 0;
height: auto;
}
#mainNav li.extended li a {
border-top: 1px #fff solid;
}
#mainNav ul ul {padding:0; margin:0}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.