多个下拉菜单在导航栏中不起作用

// 示例代码：简单的下拉菜单JavaScript
document.addEventListener('DOMContentLoaded', function() {
    var dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.preventDefault();
            this.querySelector('.dropdown-menu').classList.toggle('show');
        });
    });
});

/* 示例代码：下拉菜单的CSS */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
}

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

<!-- 示例代码：下拉菜单的HTML结构 -->
<div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-menu">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

<!-- 确保JavaScript在页面底部加载 -->
<script src="path/to/your/script.js"></script>