Arkadaşlar selam, bir türlü içinden çıkamadığım bir konu var, belki basit bir konu ama ben takıldım.

Düzenlemesini yaptığım ideasoft sitede Anamenü aşağıdaki görseldeki gibi. Benim istediğim Level 2'nin üzerine gelindiğinde Level 3 bölümünün yanda açılması. Fakat bir türlü yapamadım. Menü şu anda böylü upuzun bir şekilde komple aşağı doğru açılıyor. Yardımcı olabilecek bir arkadaş çıkarsa sevinirim. Menü css kodları aşağıdaki gibidir.

#navigation {
position: relative;
.category-level-1 {
> ul {
display: flex;
> li {
position: relative;
> a {
@include center;
color: $secondary-text-color;
font-size: 16px;
font-weight: 400;
padding: 0 $gutter;
height: 6rem;
}
&.active {
> a {
background-color: #cecece;
}
> .category-level-2 {
display: block;
}
}
&:hover {
> a {
background-color: #2F3638;
color:#fff;
}
}


}
}
}
.category-level-2 {
position:absolute;
top: 100%;
left: 0;
width: 300px;
background-color:#2F3638;
display: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 101;
padding: 2rem;
> ul {
> li {
> a {
display:block;
color: #fff;
font-size: 1.3rem;
font-weight: 400;
padding-bottom: 1rem;
margin-bottom: 1rem;
/*border-bottom: 1px solid darken($third-color, 10%);*/
}
&:hover {
> a {
color: #f00;
}
}

&.navigation-category-image {
> a {
display: flex;
flex-wrap: wrap;
align-items: center;

&:hover {
> a {
color: #cecece;
}
}



> div {
width: 2.4rem;
height: 2.4rem;
position: relative;
@include imgcenter;
}
> span {
padding-left: 1rem;
}
}
}
&:last-child {
> a {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

}
}
}
}
.category-level-3 {
margin-bottom: 1rem;
border-bottom: 1px solid $border-color;
> ul {
margin-bottom: 2rem;
> li {
> a {
display:block;
color: #fff;
font-size: 1.3rem;
padding-left: 1rem;
margin-bottom: 1rem;
}
&:hover {
> a {
color: #cecece;
}
}
&.navigation-show-all {
font-style: italic;
text-decoration: underline;
}
}
}
}
}