I recently implemented the bootstrap theme Magister, but I am struggling to add a sub-menu to the menu dropdown upon clicking on the menu. Can someone please take a look and provide some advice on where I might be going wrong?
.mainmenu .dropdown-menu {
top: -14em;
left: 0px;
font-size: 13px;
padding:0;
background:none;
border:0 none;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
display:block;
opacity:0;
-webkit-transition: all .45s;
-moz-transition: all .45s;
transition: all .45s;
}
.mainmenu .dropdown-menu .active {
font-weight:bold;
}
.mainmenu .open .dropdown-menu {
top:2px;
opacity:1;
}
.mainmenu .dropdown-menu a {
padding:10px 10px;
margin:0;
color:white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.mainmenu .dropdown-menu a:hover {
background:rgba(255,255,255,.1);
color:white;
padding:10px 8px 10px 12px;
}
.mainmenu .dropdown-menu ul li ul a{
list-style:none;
background:red;
padding:0;
margin:0;
}
.mainmenu .dropdown-menu ul li ul a:hover{
color:blue;
}<ul class="dropdown-menu" >
<li><a href="#">link</a></li>
<li><a href="#">submenu</a></li>
<ul>
<li><a href="#">submenu 1 link</a></li>
<li><a href="#">submenu 2 link</a></li>
<ul>
<li><a href="#">submenu 2-1 link</a></li>
<li><a href="#">submenu 2-2 link</a></li>
</ul>
<li><a href="#">submenu 3 link</a></li>
</ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>