<div class="sub-nav">
    <div class="grid__column" data-gridspan="12">
        <ul class="grid__row sub-nav__list">
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="All Products">All Products</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Orthopaedic Reconstruction">Orthopaedic Reconstruction</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Sports Medicine">Sports Medicine</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Gynaecology">Gynaecology</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Advanced Wound Management">Advanced Wound Management</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Trauma &amp; Extremities">Trauma &amp; Extremities</a>
            </li>
            <li class="sub-nav__item" data-gridspan="12 M6 L3">
                <a class="sub-nav__anchor" href="#" title="Ear, Nose and Throat">Ear, Nose and Throat</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="sub-nav">
	<div class="grid__column" data-gridspan="12">
		<ul class="grid__row sub-nav__list">
		{{#each items}}
		<li class="sub-nav__item" data-gridspan="12 M6 L3">
		<a class="sub-nav__anchor" href="{{link}}" title="{{title}}">{{title}}</a>
		</li>
		{{/each}}
	</ul>
	</div>
</div>
{
    "items": [
        {
            "title": "All Products",
            "link": "#"
        },
        {
            "title": "Orthopaedic Reconstruction",
            "link": "#"
        },
        {
            "title": "Sports Medicine",
            "link": "#"
        },
        {
            "title": "Gynaecology",
            "link": "#"
        },
        {
            "title": "Advanced Wound Management",
            "link": "#"
        },
        {
            "title": "Trauma & Extremities",
            "link": "#"
        },
        {
            "title": "Ear, Nose and Throat",
            "link": "#"
        }
    ]
}
.js .sub-nav {
	display: none;
	@include clearfix();
}
.js .sub-nav--active {
	display: block;
	@include mq($from: med) {
		background-color: $white;
		background-color: rgba($grey--light,0.9);
	    position: absolute;
		top: 100%;
		left: 0;
		z-index: z("navigation");
		right:-50px;
    }
	
}
.sub-nav__list {
	padding-top: 1em;
	padding-right: 1em;

}
.sub-nav__item {
	margin-bottom: 1em;
}
.sub-nav__anchor {
	display: block;
	color: $grey--superdark;
	@include mq($from: med) {
		display: flex;
		text-align: center;
		min-height: 30px;
		justify-content: center;
	    flex-direction: column;
	    &:focus {
	    	background: $grey;
	    }
	}
}

There are no notes for this item.