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;
}
}
}
}
}
