HTMLにてCSS、JSを用いてドロップダウンメニューを出したい。

前提・実現したいこと

ドロップダウンメニューを出したいです。

※https://photoshopvip.net/97481
内Dropdown Navigation

コードが長く申し訳御座いません。どうぞよろしくお願いいたします。

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

親となる「Products」などのメニューを押すとドロップダウンメニューが出ずに、遷移してしまいます。

<head>内の以下のコードが原因でしたが、残したいです。（ソースコードでは一旦消しています）

HTML
1<base href="url" />

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4
5<meta http-equiv="Content-Language" content="ja">
6<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
7<meta http-equiv="Content-Script-Type" content="text/javascript">
8
9<title>タイトル</title>
10<script src="js/dropdown.js"></script>
11<link href="css/dropdown.css" rel="stylesheet" type="text/css">
12</head>
13<body>
14<nav role="navigation" class="nav">
15    <ul class="nav-items">
16        <li class="nav-item">
17            <a href="#" class="nav-link"><span>Home</span></a>
18        </li> 
19        <li class="nav-item dropdown">
20            <a href="#" class="nav-link"><span>Products</span></a>
21            <nav class="submenu">
22                <ul class="submenu-items">
23                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
24                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
25                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
26                </ul>
27            </nav>
28        </li> 
29        <li class="nav-item">
30            <a href="#" class="nav-link"><span>Services</span></a>
31        </li>
32        <li class="nav-item">
33            <a href="#" class="nav-link"><span>Pricing</span></a>
34        </li> 
35        <li class="nav-item">
36            <a href="#" class="nav-link"><span>News</span></a>
37        </li>
38        <li class="nav-item dropdown">
39            <a href="#" class="nav-link"><span>More</span></a>
40            <nav class="submenu">
41                <ul class="submenu-items">
42                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
43                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
44                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
45                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
46                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
47                    <li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li>
48                </ul>
49            </nav>
50        </li>  
51    </ul>
52</nav>
53</body>
54</html>

CSS
1/* Page */
2
3html {
4    box-sizing: border-box;
5}
6
7*, 
8*:before, 
9*:after {
10    box-sizing: inherit;
11}
12
13body {
14    background-color: #3498db; 
15}
16
17.nav {
18    width: 550px;
19    margin: 100px auto 0 auto;
20    text-align: center;
21}
22
23/* Navigation */
24
25.nav {
26    font-family: Georgia, Arial, sans-serif;
27    font-size: 14px;
28}
29
30.nav-items {
31    padding: 0;
32    list-style: none;
33}
34
35.nav-item {
36    display: inline-block;
37    margin-right: 25px;
38}
39
40.nav-item:last-child {
41    margin-right: 0;
42}
43
44.nav-link,
45.nav-link:link, 
46.nav-link:visited, 
47.nav-link:active,
48.submenu-link,
49.submenu-link:link, 
50.submenu-link:visited, 
51.submenu-link:active {
52    display: block;
53    position: relative;
54    font-size: 14px;
55    letter-spacing: 1px;
56    cursor: pointer;
57    text-decoration: none;
58    outline: none;
59}
60
61.nav-link,
62.nav-link:link, 
63.nav-link:visited, 
64.nav-link:active {
65    color: #fff;
66    font-weight: bold;
67}
68
69.nav-link::before {
70    content: "";
71    position: absolute;
72    top: 100%;
73    left: 0;
74    width: 100%;
75    height: 3px;
76    background: rgba(0,0,0,0.2);
77    opacity: 0;
78    -webkit-transform: translate(0, 10px);
79    transform: translate(0, 10px);
80    transition: opacity 0.3s ease, transform 0.3s ease;
81}
82
83.nav-link:hover::before,
84.nav-link:hover::before {
85    opacity: 1;
86    -webkit-transform: translate(0, 5px);
87    transform: translate(0, 5px);
88}
89
90.dropdown {
91    position: relative;
92}
93
94.dropdown .nav-link {
95    padding-right: 15px;
96    height: 17px;
97    line-height: 17px;
98}
99
100.dropdown .nav-link::after {
101    content: "";
102    position:absolute;
103    top: 6px;
104    right: 0;
105    border: 5px solid transparent;
106    border-top-color: #fff;
107}
108
109.submenu {
110    position: absolute;
111    top: 100%;
112    left: 50%;
113    z-index: 100;
114    width: 200px;
115    margin-left: -100px;
116    background: #fff;
117    border-radius: 3px;
118    line-height: 1.46667;
119    margin-top: -5px;
120    box-shadow: 0 0 8px rgba(0,0,0,.3);
121    opacity:0;
122    -webkit-transform: translate(0, 0) scale(.85);
123    transform: translate(0, 0)scale(.85);
124    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
125    pointer-events: none;
126}
127
128.submenu::after, 
129.submenu::before {
130    content: ""; 
131    position: absolute;
132    bottom: 100%;
133    left: 50%;
134    margin-left: -10px;
135    border: 10px solid transparent;
136    height: 0;
137}
138
139.submenu::after {
140    border-bottom-color: #fff;
141}
142
143.submenu::before {
144    margin-left: -13px;
145    border: 13px solid transparent;
146    border-bottom-color: rgba(0,0,0,.1);
147    -webkit-filter:blur(1px);
148    filter:blur(1px);
149}
150
151.submenu-items {
152    list-style: none;
153    padding: 10px 0;
154}
155
156.submenu-item {
157    display: block;
158    text-align: left;
159}
160
161.submenu-link,
162.submenu-link:link, 
163.submenu-link:visited, 
164.submenu-link:active {
165    color: #3498db;
166    padding: 10px 20px;
167}
168
169.submenu-link:hover {
170    text-decoration: underline;
171}
172
173.submenu-seperator {
174    height: 0;
175    margin: 12px 10px;
176    border-top: 1px solid #eee;
177}
178
179.show-submenu .submenu {
180    opacity: 1;
181    -webkit-transform: translate(0, 25px) scale(1);
182    transform: translate(0, 25px) scale(1);
183    pointer-events: auto;
184}

js
1[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
2    el.addEventListener('click', onClick, false);
3});
4
5function onClick(e){
6    e.preventDefault();
7    var el = this.parentNode;
8    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
9}
10
11function showSubMenu(el){
12    el.classList.add('show-submenu');
13    document.addEventListener('click', function onDocClick(e){
14        e.preventDefault();
15        if(el.contains(e.target)){
16            return;
17        }
18        document.removeEventListener('click', onDocClick);
19        hideSubMenu(el);
20    });
21}
22
23function hideSubMenu(el){
24    el.classList.remove('show-submenu');
25}

試したこと

<base href="url" />を一旦削除しても遷移が出来なくなるだけで、ドロップダウンメニューは出現しませんでした。

ローカルでもリモートでもうまく動作しません。

beginner_t

2020/11/05 04:10

提示されているコードは実際に使用しているコードでしょうか？提示されているコードを試したところ正常に動いていますので、原因はほかのところにあるかもしれません。デベロッパーツールなどでエラーが出ていないかも確認し、でている場合はそちらもご提示ください。

hinomar

2020/11/05 04:45

はい、実際に使用しているコードで、デベロッパーツールにエラーは出ていません。前後は以下です。 <!doctype html> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <script src="js/dropdown.js"></script> <link href="css/dropdown.css" rel="stylesheet" type="text/css"> </head> <body> ・・・<nav>・・・ </body> </html>

hinomar

2020/11/05 04:49

<base href="url" /> は遷移してしまうので、一旦消しています。

beginner_t

2020/11/05 05:24

「<base href="url" />を一旦削除して遷移出来ないようにしましたが、同じでした。」というのは<base href="url" />を記載していなくても、ドロップダウンメニューが出ずに、遷移してしまうという認識であってますか？

hinomar

2020/11/05 05:33

いえ、<base href="url" />を消している状態であればドロップダウンメニューが出ずに、遷移もしません。

beginner_t

2020/11/05 05:38

「<base href="url" />を一旦削除して遷移出来ないようにしましたが、同じでした。」というのはどの現象をさしているのでしょうか？