Navigation flexbox

by oilvier

HTML

<div class="layout">
<ul class="nav nav-children site-nav">
	<li class="has-children">
		<a href="#">
			<span class="site-nav__txt">Éveil et découverte</span> <i class="site-nav__tip"></i>
		</a>
		<div class="children">
			<div class="site-nav__dropdown">
				<ul class="grids">
					<li class="grid-1-3">

						<div class="row site-nav__heading">
							<div class="cell">
								<div class="site-nav__heading-picture">
									<img src="" alt=""></div>
							</div>
							<div class="cell">
								<a href="/naissance">Naissance</a>
							</div>
						</div>

						<ul class="site-nav__list">
							<li>
								<a href="/hochets">Hochets</a>
							</li>
							<li>
								<a href="/accessoires-de-poussett">Accessoires de poussette</a>
							</li>
						</ul>
					</li>
					<li class="grid-1-3">

						<div class="row site-nav__heading">
							<div class="cell">
								<div class="site-nav__heading-picture">
									<img src="" alt=""></div>
							</div>
							<div class="cell">
								<a href="/jouets-1er-age">Jouets 1er âge</a>
							</div>
						</div>

						<ul class="site-nav__list">
							<li>
								<a href="/boites-a-forme">Boîtes à forme</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li class="">
		<a href="/figurines-et-accesoires">
			<span class="site-nav__txt">Figurines et accesoires</span> <i class="site-nav__tip"></i>
		</a>
	</li>
	<li class="has-children">
		<a href="#">
			<span class="site-nav__txt">Poupées</span>
			<i class="site-nav__tip"></i>
		</a>
		<div class="children">
			<div class="site-nav__dropdown">
				<ul class="grids">
					<li class="grid-1-3">

						<div class="row site-nav__heading">
							<div class="cell">
								<div class="site-nav__heading-picture">
									<img src="" alt=""></div>
							</div>
							<div class="cell">
								<a href="#">poupee bis</a>
							</div>
						</div>

					</li>
					<li class="grid-1-3">

						<div class="row...

CSS

*, *:before, *:after {box-sizing:border-box;}
* {margin:0; padding:0;}

ul {list-style:none;}

.layout {max-width:1000px; margin:0 auto;}
/* Trigger sous-menu */
.has-children {position:relative;}
	/* Sous-menu */
	.has-children .children {position:absolute; top:100%; left:-99999em;}
		.has-children .children > li > a {display:block;}
    /* Apparition sous-menu */
    .has-children:hover > .children {left:0;}

.site-nav {position:relative; display:flex; flex-direction:row; margin:0; z-index:2;}
		.site-nav > li {position:static; display:flex; flex:1 1 auto; vertical-align:middle;}
		.site-nav > li:before {content:""; position:absolute; top:15px; bottom:15px; width:1px; background:#eae0da;}
			.site-nav > li > a {display:flex; flex-direction:column; flex:1; @include rem-fs(14px); line-height:1.2; text-align:center;}
				.site-nav__txt {display:inline-block; flex-shrink:0; padding:14px 14px 3px; margin-top:auto;}
				.site-nav__tip {position:relative; display:block; width:100%; height:11px; margin:auto auto 0;}
				.site-nav__tip:after {content:""; position: absolute; bottom:0; left:10px; right:10px; border-top:0 solid #E63B77; height:0; border-radius:3px 3px 0 0; transition:border 0.2s ease-out;}
		
		/* Comportement spécifique pour le premier lien */
		.site-nav > li:first-child:before {display:none;}	
			.site-nav > li:first-child .site-nav__txt {padding-left:0;}
			.site-nav > li:first-child .site-nav__tip:after {left:0;}

		/* Comportement spécifique pour le dernier lien */
		.site-nav > li:last-child .site-nav__txt {padding-right:0; /* white-space:nowrap;Solution temporaire pour gérer "Plein air" sur une seule ligne */}
		.site-nav > li:last-child .site-nav__tip:after {right:0;}
		
		/* Survol */
		.site-nav > li:hover > a {color:#e63b77;}
		.site-nav > li.has-children:hover .site-nav__tip:after {border-top-width:11px;}
		
		.site-nav > li.has-children:hover .children {left:0; right:0; opacity:1; transition:opacity 0.5s ease-out;}

		/* ### Sous menu
		  ...