1 - Create sub.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:
2 - Open forumbit_subforums template and replace all content with
view
![[Image: 6mD4Y7.png]]()
![[Image: yVGydy.png]]()
Code:
.sub-menu .fa-angle-down {
position: absolute;
bottom: -1px;
color: #ED79C3;
font-size: 20px;
margin-top: 19px;
}
.sub-menu:hover .fa-angle-down {
transform: scale(1) rotate(180deg) translate(0);
transition: linear 0.5s;
}
.sub-menu{
text-align:left;
font-family: 'Lato', sans-serif;
color:#2CCADB;
}
.sub-menu *{
transition: all .2s ease-out 0s;
-o-transition: all .2s ease-out 0s;
-ms-transition: all .2s ease-out 0s;
-moz-transition: all .2s ease-out 0s;
-webkit-transition: all .2s ease-out 0s;}
.sub-menu ul {
list-style:none;
margin:0;
padding:0;
}
h5 {
font-size: 12px;
text-transform: normal;
}
.sub-menu ul li {
display:inline-block;
perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
-moz-perspective: 500px;
-webkit-perspective: 500px;
position:relative;
}
.sub-menu li>ul {
background:#D9F2ED;
position:absolute;
visibility:hidden;
opacity:0;
top:100%;
width:300%;
margin-top:30px;
display:inline-block;
color:#f5f5f5;
border-bottom:5px solid#2CC3D4;
border-top:5px solid#2CC3D4;
}
.sub-menu li:hover>ul {
visibility:visible;
opacity:1;
transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
margin-top:0;
}2 - Open forumbit_subforums template and replace all content with
Code:
<div class="sub-menu">
<ul>
<li> Sub Forums<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<h5>{$sub_forums}</h5>
</ul>
</li>
</ul>
</div>view