Reply To: Submneu does not work in the secondary menu

[Support]

Hello,

You can do that following the steps below:

First use this HTML:

<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'padding': {'top': 72}}">
	<div class="container">
		<div class="row">
			<div class="col">
				<ul class="nav nav-pills nav-pills-tertiary justify-content-center">
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#features">Features</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#plans">Hosting Plans</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#testimonials">Testimonials</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#search-domain">Search Domain</a></li>
					<li class="custom-dropdown nav-item">
						<a class="nav-link" data-hash data-hash-offset="165" href="#blog">Our Blog</a>
						<ul class="dropdown-menu">
							<li><a class="nav-link" href="#">Submenu Item 1</a></li>
							<li><a class="nav-link" href="#">Submenu Item 2</a></li>
							<li><a class="nav-link" href="#">Submenu Item 3</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</aside>

Add in (css/custom.css):

.custom-dropdown {
	position: relative;
}

.custom-dropdown > .dropdown-menu {
	border-color: #f8f8f8;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07);
}

.custom-dropdown > .dropdown-menu li a {
	color: #777;
	transition: ease all 300ms;
	font-weight: 400;
}

.custom-dropdown > .dropdown-menu li:hover > a {
	color: #1d7fbe;
	background: #f8f8f8;
}

.custom-dropdown:hover > .dropdown-menu {
	display: block;
	top: 99%;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---