How to register and add a drop down menu on hover in wordpress?

Question

JavaScript

Hello! There is a site on wordpress where I want to add a bootstrap menu with a drop-down list on hover to the theme. I register the menu in the standard way:

register_nav_menus(array(
'top'    => 'Верхнее меню'
));

wp_nav_menu( array(
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
    'menu_class'=>'nav navbar-nav navbar-right',
    'theme_location'=>'top'
) );

Then I want to transfer the functionality of this menu to it, but there are problems with adding data-toggle="dropdown" attributes to the class="dropdown-toggle" class link and to the internal ul list of the dropdown-menu class . How can I do that? fiddle

.dropdown:hover > .dropdown-menu {
  display: block;
}

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".js-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" style="padding:15px 15px;">Название проекта</a>
    </div>
    <div class="collapse navbar-collapse js-navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Главная</a>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">
            Меню
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Текст подпункта</a>
            </li>
            <li><a href="#">Текст подпункта</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Текст подпункта</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

I throw off my workpiece:
functions.php

register_nav_menus(array(
  'top' => 'Верхнее',
  'bottom' => 'Внизу'
));
if (!class_exists('bootstrap_menu')) {
  class bootstrap_menu extends Walker_Nav_Menu {
    private $open_submenu_on_hover;
    function __construct($open_submenu_on_hover = true) {
          $this->open_submenu_on_hover = $open_submenu_on_hover;
      }
    function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\n<ul class=\"dropdown-menu\">\n";
    }
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
      $item_html = '';
      parent::start_el($item_html, $item, $depth, $args);
      if ( $item->is_dropdown && $depth === 0 ) {
         if (!$this->open_submenu_on_hover) $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"', $item_html);
         $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
      }
      $output .= $item_html;
    }
    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
      if ( $element->current ) $element->classes[] = 'active';
      $element->is_dropdown = !empty( $children_elements[$element->ID] );
      if ( $element->is_dropdown ) {
          if ( $depth === 0 ) {
              $element->classes[] = 'dropdown';
              if ($this->open_submenu_on_hover) $element->classes[] = 'show-on-hover';
          } elseif ( $depth === 1 ) {
              $element->classes[] = 'dropdown-submenu';
          }
      }
      parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
  }
}

header.php

<nav class="navbar navbar-default">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav" aria-expanded="false">
                <span class="sr-only">Меню</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="topnav">
              <?php $args = array( 
                'theme_location' => 'top',
                'container'=> false,
              		'menu_id' => 'top-nav-ul',
              		'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
                'menu_class' => 'top-menu',
              		'walker' => new bootstrap_menu(true)		  		
            			);
                wp_nav_menu($args);
              ?>
            </div>
          </nav>

@media (min-width: 979px) { 
  ul.nav li.dropdown.show-on-hover:hover > ul.dropdown-menu {
    display: block;
  }
  .comment-list .children {
    padding: 0;
    margin-left: 74px;
    padding-bottom: 15px;
  }
  .comment-list .media {
    margin-top: 0;
  }
}

Taken from: https://github.com/saxap/clean-wp-template
Good luck with development =)