bootstrap4を利用してドロップダウン表示が期待した通りにならない問題

wordpressにbootstrap4を利用してサイト構築を検討しておりますが、
ドロップダウン表示が期待した通りにならずに困っています。
初歩的なことだと思うのですが、中々解決できないため、本サイトにて質問させていただきます。
原因（事象切り分け含む）、解消方法がわかるようでしたら、ご教示いただけますと助かります。

前提・実現したいこと

以下サイトと同様にドロップダウンをHTML表示させたい。
https://cccabinet.jpn.org/bootstrap4/components/dropdowns#menu-items

発生している問題・エラーメッセージ

上記サイトにある"設定例"の通りに、HTMLコードを書いていますが、
ドロップダウンの表示が無駄な余白などが入った表示になってしまう。

該当のソースコード

HTML
1<div class="dropdown">
2  <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3   ドロップダウン
4  </button>
5  <div class="dropdown-menu" aria-labelledby="dropdownMenu">
6    <button class="dropdown-item" type="button">メニュー1</a>
7    <button class="dropdown-item" type="button">メニュー2</a>
8    <button class="dropdown-item" type="button">メニュー3</a>
9  </div>
10</div>

function.php(wordpress)のbootstrap読み込む部分

php
1wp_enqueue_style('bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css',array(),false, false);
2wp_enqueue_style('bootstrap4', 'https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css',array(),false, false );
3wp_enqueue_script( 'jquery1', 'https://code.jquery.com/jquery-3.3.1.js',array(),false, true );
4wp_enqueue_script( 'jquery2', 'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',array(),false, true );
5wp_enqueue_script( 'jquery2.5', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js',array('jquery2'),false, true );
6wp_enqueue_script( 'jquery2.6', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',array('jquery2.5'),false, true );
7wp_enqueue_script( 'jquery3', 'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js',array('jquery2.6'), false, true );