[For 1.8] Sub Forums Dropdown Menu

[Anka06]

1 - Create sub.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:

.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

	<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

[WallBB]

Nice tutorial, good work

[Anka06]

Thanks