Sub Menu on Hover

$5,668

Sales

Description

Default dropdown menu opens on hover. Via data attributes data-open="hover" or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

HTML Markup

This section contains HTML Markup to create light vertical navigation. This markup define where to add css classes to make vertical navigation light.

  • Line no 4: Contain the data-open attribute has hover in body tag. Option data-open="hover" will open all the dropdown on hover.
        
            <!DOCTYPE html>
              <html lang="en">
                <head></head>
                <body data-open="hover" data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

                  <!-- fixed-top-->
                  <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border">
                      ...
                  </nav>

                  <!-- BEGIN Navigation-->
                  <div class="main-menu menu-light menu-shadow">
                      ...
                  </div>
                  <!-- END Navigation-->

                  <!-- BEGIN Content-->
                  <div class="content app-content">
                      <div class="content-wrapper">
                          <!-- content header-->
                          <div class="content-header row">
                              ...
                          </div>
                          <!-- content header-->

                          <!-- content body-->
                          <div class="content-body">
                              ...
                          </div>
                          <!-- content body-->

                      </div>
                  </div>
                  <!-- END Content-->

                  <!-- START FOOTER DARK-->
                  <footer class="footer footer-dark">
                      ...
                  </footer>
                  <!-- START FOOTER DARK-->

                </body>
              </html>
        
        

Theme Customizer


Customize & Preview in Real Time

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient


Menu Color Options
Buy Now