How to make dropdown menu in Cassiopeia template

1. On click In the menu module, select Alternate Template Colapsible Dropdown.

2. Hover The alternate template remains the default. Instead of this add CSS code. For example, the code could be like below (I also added css menu class “dropmenu” in module settings):

The code below will add a submenu popup and a triangle indicating that this is a dropdown menu.

.container-header nav {
    margin-top: .5em;
    margin-left: 15px;
    display: flex;
    flex: 1;
    flex-direction: row;
}
.metismenu.mod-menu .metismenu-item{
	padding: 1em 1em 1em .25em  !important;	
}
.mod-list li {
	padding:  3em 0 0.25em 0 !important;
}
.container-header .container-search {
    margin-top: 2.5em;
}

.container-header .dropmenu li:hover > ul {
 display: block;
 background-color: #fff;
 position: absolute;
 top: 100%;
 left: 0;
 min-width: 250px;
 padding: 1em;
 font-size: 17px;
 line-height: 1.3;
}
.item-content .tags .list-inline-item{
	margin: 0 0.5rem 0.5rem 0;
}
.dropmenu .deeper.parent > a:after,
.dropmenu .deeper.parent > a:before{
 content: “”;
 position: absolute;
 top: 50%;
 width: 7px;
 height: 2px;
 border-radius: 2px;
 background: #000;
}
.dropmenu .deeper.parent > a:after{transform: rotate(-50deg);right: -3px;}
.dropmenu .deeper.parent > a:before{transform: rotate(50deg);right: 0;}
.dropmenu .deeper.parent:hover > a:after{transform: rotate(50deg);}
.dropmenu .deeper.parent:hover > a:before{transform: rotate(-50deg);}
.dropmenu .deeper.parent ul li.active a,
.dropmenu .deeper.parent ul li a:hover{color:#ff822a}

Hope this quick tip will be useful for you.

Need Joomla experts for development of custom Joomla Plugin, feel free to contact us Today