3 level menu

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 6, 2026 at 2:53 pm #10046055
    putragaluh
    Participant

    Hello,

    we are using prebuilt website https://www.okler.net/previews/porto/13.0.0/demo-accounting-2.html

    we have problem to display 3 level menu on Accountant 1 dan Accountant 2. submenu not showing.

    sub menu not showing

    how to solve this? its very urgent for our dateline project.

    Regards.


    Template Version: Accountant 1 dan Accountant 2
    February 6, 2026 at 8:47 pm #10046057
    Support
    Keymaster

    Hi, here’s an example:

    HTML:

    <nav class="collapse">
	<ul class="nav nav-pills" id="mainNav">
		<li>
			<a href="demo-accounting-2.html" class="nav-link active">
				<span>Home</span>
			</a>
		</li>
		<li>
			<a class="nav-link" href="demo-accounting-2-about.html">
				<span>About</span>
			</a>
		</li>
		<li class="dropdown">
			<a href="demo-accounting-2-services.html" class="nav-link dropdown-toggle"><span>Services</span></a>
			<ul class="dropdown-menu">
				<li><a href="demo-accounting-2-services.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Overview</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Tax Advisory</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Audit Assurance</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Financial Planning</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Business Consulting</a></li>
			</ul>
		</li>
		<li>
			<a class="nav-link" href="demo-accounting-2-industries.html">
				<span>Industries</span>
			</a>
		</li>
		<li>
			<a class="nav-link" href="demo-accounting-2-insights.html">
				<span>Insights</span>
			</a>
		</li>
													

		<li class="dropdown">
			<a href="demo-accounting-2-services.html" class="nav-link dropdown-toggle"><span>Services</span></a>
			<ul class="dropdown-menu">
				<li><a href="demo-accounting-2-services.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Overview</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Tax Advisory</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Audit Assurance</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Financial Planning</a></li>
				<li><a href="demo-accounting-2-services-details.html" class="dropdown-item anim-hover-translate-right-5px transition-3ms bg-transparent text-color-hover-primary text-lg-2 py-lg-2">Business Consulting</a></li>

				<li class="dropdown-submenu">
					<a class="dropdown-item" href="#">Extra</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="portfolio-extra-timeline.html">Timeline</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-lightbox.html">Lightbox</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-load-more.html">Load More</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-infinite-scroll.html">Infinite Scroll</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-lazy-load-masonry.html">Lazy Load Masonry</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-pagination.html">Pagination</a></li>
						<li><a class="dropdown-item" href="portfolio-extra-combination-filters.html">Combination Filters</a></li>
					</ul>
				</li>
			</ul>
		</li>
		
		<li>
			<a class="nav-link" href="demo-accounting-2-contact.html">
				<span>Contact</span>
			</a>
		</li>
	</ul>
</nav>

    CSS:
    (css/custom.css)

    @media (min-width: 992px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) .dropdown-menu {
        overflow: visible !important;
    }
}

@media (min-width: 992px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:hover.dropdown:not(.dropdown-mega) .dropdown-menu {
        transform: none !important;
		transition: none !important;
    }
}

@media (min-width: 992px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) .dropdown-menu li a {
        border-radius: 8px !important;
    }
}
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.