<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/solid.css">
<nav class="menu" style="width: 1350px;">
<ol style="margin-bottom:0px;">
<li class="menu-item"><a href="#0">Okul ve Öncesi</a></li>
<li class="menu-item"><a href="#0">Yeni Sezon</a></li>
<li class="menu-item">
<a href="#0">Kız</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">İlk Adım</a></li>
<li class="menu-item"><a href="#0">Bebek</a></li>
<li class="menu-item"><a href="#0">Çocuk</a></li>
<li class="menu-item"><a href="#0">Genç</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Erkek</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">İlk Adım</a></li>
<li class="menu-item"><a href="#0">Bebek</a></li>
<li class="menu-item"><a href="#0">Çocuk</a></li>
<li class="menu-item"><a href="#0">Genç</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Aksesuar</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Okul Çantası</a></li>
<li class="menu-item"><a href="#0">Anne Bebek Çantası</a></li>
<li class="menu-item"><a href="#0">Kalem Kutusu</a></li>
<li class="menu-item"><a href="#0">Çorap</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Fırsat Garajı</a></li>
</ol>
</nav>
@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v12/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');
}
* {
box-sizing: border-box;
}
:root {
--accent-color: #45494E;
--gradient-color: #FBFBFB;
}
a:focus {
outline: none;
position: relative;
}
a:focus:after {
width: 50px;
}
a:after {
content: "";
background: #FBFBFB;
position: absolute;
bottom: 5px;
left: 15px;
height: 3px;
width: 0;
transition: 0.5s;
transition-delay: 0.2s;
}
body {
font-family: "Varela Round", Nunito, Montserrat, sans-serif;
margin: 0;
padding: 0;
text-transform: capitalize;
}
.menu {
margin: 15px;
}
.menu > ol {
list-style: none;
padding: 0;
}
.menu > ol > li {
background: #3c3c3c;
border-left: 5px solid var(--gradient-color);
margin-bottom: 1px;
position: relative;
transition: 0.5s;
}
.menu > ol > li:nth-child(1) {
--accent-color: #FDA085;
--gradient-color: #F6D365;
}
.menu > ol > li:nth-child(2) {
--accent-color: #BFF098;
--gradient-color: #6FD6FF;
}
.menu > ol > li:nth-child(3) {
--accent-color: #EA8D8D;
--gradient-color: #A890FE;
}
.menu > ol > li:nth-child(4) {
--accent-color: #D8B5FF;
--gradient-color: #1EAE98;
}
.menu > ol > li:nth-child(5) {
--accent-color: #C6EA8D;
--gradient-color: #FE90AF;
}
.menu > ol > li:nth-child(6) {
--accent-color: #DDD600;
--gradient-color: #FE90AF;
}
.menu > ol > li a {
color: #FBFBFB;
display: block;
padding: 15px;
position: relative;
text-decoration: none;
z-index: 1;
}
.menu > ol > li a:not(:last-child):before {
content: "\f078";
font-family: fontAwesome;
font-size: 0.75em;
line-height: 50px;
position: absolute;
right: 25px;
top: 0;
bottom: 0;
margin: auto;
transition: 0.5s;
}
.menu > ol > li:focus,
.menu > ol > li:focus-within,
.menu > ol > li:hover {
z-index: 100;
}
.menu > ol > li:focus:after,
.menu > ol > li:focus-within:after,
.menu > ol > li:hover:after {
background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
max-width: 800px;
}
.menu > ol > li:focus .sub-menu,
.menu > ol > li:focus-within .sub-menu {
max-height: 500px;
}
.menu > ol > li:focus a:before,
.menu > ol > li:focus-within a:before {
transform: rotate(-180deg);
}
.menu > ol > li:after {
background: #3c3c3c;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: 0.5s;
max-width: 0;
overflow: hidden;
}
.menu > ol .sub-menu {
border-left: 1px solid #FBFBFB;
margin-left: 22.5px;
list-style: none;
max-height: 0px;
overflow: hidden;
padding-left: 7.5px;
position: relative;
transition: 0.5s;
z-index: 1;
}
.menu > ol .sub-menu li {
font-size: 0.9em;
}
.menu > ol .sub-menu li:hover,
.menu > ol .sub-menu li a:focus {
background: rgba(60, 60, 60, 0.3);
}
.menu > ol .sub-menu li a:after {
bottom: 5px;
height: 1px;
}
.menu > ol .sub-menu li a:hover:after,
.menu > ol .sub-menu li a:focus:after {
width: 15px;
}
@media (min-width: 600px) {
a:focus,
a:hover {
position: relative;
}
a:focus:after,
a:hover:after {
width: 50px;
}
a:after {
left: 0;
right: 0;
margin: auto;
}
.menu {
margin: 0;
margin-left:-10%;
}
.menu > ol {
display: block;
max-width: none;
text-align: center;
}
.menu > ol > li {
border-top: 5px solid var(--accent-color);
border-left: 0;
display: inline-block;
margin-left: -5px;
vertical-align: top;
width: 120px;
}
.menu > ol > li:hover:after,
.menu > ol > li:focus:after,
.menu > ol > li:focus-within:after {
background: linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
border-radius: 3px;
top: -15px;
bottom: -15px;
left: -15px;
right: -15px;
}
.menu > ol > li:hover .sub-menu,
.menu > ol > li:focus .sub-menu,
.menu > ol > li:focus-within .sub-menu {
max-height: 750px;
}
.menu > ol > li a:not(:last-child):before {
right: 12.5px;
}
.menu > ol > li:hover a:before {
transform: rotate(-180deg);
}
.menu > ol .sub-menu {
border-left: 0;
margin: 15px -15px -15px;
padding-left: 0;
}
}
@media (min-width: 775px) {
.menu > ol > li {
width: 180px;
}
.menu > ol > li a:not(:last-child):before {
right: 25px;
}
}
