Code:
nav#desktop-nav ul li > ul {
position: relative;
margin-top: 0;
text-align: left;
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
transform: scaleY(0);
transform-origin: 0 0 0;
transition: all 0.5s ease 0s;
width: 20em;
z-index: 99999;
background: #002147;
padding: 0;
/* left: 5px; */
}
<nav id="desktop-nav">
<ul>
<li>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="javascript:void(0)">
All Courses <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dividers" id="top"><i class="fa fa-caret-up"></i></li>
<li class="dropdown-submenu">
<?php
$this->db->select('*');
$this->db->from('courses');
$query = $this->db->get();
$result = $query->result_array();
foreach($result as $row)
{
echo "<a tabindex='-1' href='javascript:void(0)' class='link' id='".$row['id']."'>".$row['main_course_name']."</a>";
?>
<ul class="dropdown-menu" id="drop"></ul>
<?php
}
?>
</li>
<li class="dividers" id="bottom"><i class="fa fa-caret-down"></i></li>
</ul>
</div>
</li>
</ul>
</nav>
I built a complex multi-level dropdown menu. Clicking on the 'Courses' option reveals a submenu, which itself contains another submenu. To display this third submenu above the parent menu, what changes should I make? Your guidance would be greatly appreciated.
Many thanks