仿制OpenStax网站下拉菜单遇实现难题，寻求技术指导

架构老林

2026-7-2

问题：实现类似OpenStax样式的下拉菜单

我希望设计一个与OpenStax网站样式相似的下拉菜单，包含Subjects、Technology和What We Do三个板块。目前已完成锚点等元素的初步创建，但实现过程中遇到困难，恳请提供技术指导。以下是我编写的代码：

HTML代码

<nav class="navbar1">
    <img src="./Logo.png" alt="OpenStax logo" width="120px" height="30px" class="logo">
    <p class="navpara">Access. The future of education.</p>
    <div class="dropdownmenu">
        <button onclick="myFunction()" class="dropdownbtn">Subjects</button>
        <div id="mydropdown" class="dropdown-content">
            <a href="">All</a>
            <a href="">Business</a>
            <a href="">College Success</a>
            <a href="">Humanities</a>
            <a href="">Science</a>
            <a href="">Social Sciences</a>
        </div>
    </div>
    <div class="dropdownmenu">
        <button onclick="myFunction()" class="dropdownbtn">Technology</button>
        <div id="mydropdown" class="dropdown-content">
            <a href="">OpenStax Assignable</a>
            <a href="">OpenStax Kinetic</a>
            <a href="">OpenStax Technology Partners</a>
        </div>
    </div>
    <div class="dropdownmenu">
        <button onclick="myFunction()" class="dropdownbtn">What We do</button>
        <div id="mydropdown" class="dropdown-content">
            <a href="">About us</a>
            <a href="">Team</a>
            <a href="">Research</a>
            <a href="">K12 Books & Resources</a>
            <a href="">Institutional Partnership</a>
            <a href="">Technology Partnership</a>
            <a href="">Webinars</a>
        </div>
    </div>
    <Button class="givebtn">Give</Button>
    <button class="loginbtn">Login</button>
</nav>

CSS代码

.navbar1 {
    width: 100%;
    padding: 5px 0 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: white;
}
.logo {
    margin-right: 10px;
    padding-left: 60px;
}
.navpara {
    margin-right: 14rem;
}

.dropdownbtn {
    padding: 13px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

/* The container <div> - needed to position the dropdown content */
.dropdownmenu {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.show {display:block;}

.givebtn {
    padding: 13px 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

.loginbtn {
    padding: 13px 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

JavaScript代码

function myFunction() {
    document.getElementById("mydropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dropdownbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

修复方案及优化建议

1. 修复核心功能问题

原代码中所有下拉菜单共用同一个id="mydropdown"，JavaScript通过getElementById只会选中第一个下拉菜单，导致点击不同按钮都只会打开第一个下拉。解决方法：

移除重复的id，通过按钮的DOM关联关系获取对应下拉元素（更灵活）
修改点击逻辑，确保每次只切换当前按钮对应的下拉菜单，同时关闭其他已打开的下拉

修改后的HTML和JS：

<!-- 移除下拉菜单的id，保留结构 -->
<div class="dropdownmenu">
    <button onclick="toggleDropdown(this)" class="dropdownbtn">Subjects</button>
    <div class="dropdown-content">
        <!-- 选项不变 -->
    </div>
</div>
<!-- 其他两个dropdownmenu结构一致 -->

function toggleDropdown(btn) {
    // 获取当前按钮的兄弟下拉元素
    const targetDropdown = btn.nextElementSibling;
    // 关闭所有其他已打开的下拉
    document.querySelectorAll('.dropdown-content.show').forEach(dropdown => {
        if (dropdown !== targetDropdown) dropdown.classList.remove('show');
    });
    // 切换当前下拉的显示状态
    targetDropdown.classList.toggle('show');
}

window.onclick = function(event) {
    // 点击区域不是按钮，也不是下拉菜单内部时，关闭所有下拉
    if (!event.target.matches('.dropdownbtn') && !event.target.closest('.dropdown-content')) {
        document.querySelectorAll('.dropdown-content.show').forEach(dropdown => {
            dropdown.classList.remove('show');
        });
    }
}

2. 样式优化（贴近OpenStax风格）

调整导航栏布局，拆分左右区域，让视觉层次更清晰
给按钮添加下拉箭头提示，hover时添加背景色
优化下拉菜单的阴影、圆角和过渡效果
给右侧的Give和Login按钮添加主题色样式

修改后的CSS：

.navbar1 {
    width: 100%;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.nav-left {
    display: flex;
    align-items: center;
}
.nav-right {
    padding-right: 60px;
}
.logo {
    margin-right: 12px;
    padding-left: 60px;
}
.navpara {
    margin-right: 4rem;
    color: #666;
    font-size: 14px;
}

.dropdownbtn {
    padding: 10px 16px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #333;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
}
.dropdownbtn::after {
    content: "▼";
    font-size: 12px;
    opacity: 0.7;
}
.dropdownbtn:hover {
    background-color: #f5f5f5;
}

.dropdownmenu {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    z-index: 100;
    padding: 8px 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 15px;
}

.dropdown-content a:hover {
    background-color: #f0f0f0;
}

.show {
    opacity: 1;
    visibility: visible;
}

.givebtn {
    padding: 10px 24px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    margin: 0 8px;
}
.givebtn:hover {
    background-color: #0056b3;
}

.loginbtn {
    padding: 10px 24px;
    font-size: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: white;
    border-radius: 4px;
    margin: 0 8px;
}
.loginbtn:hover {
    border-color: #007bff;
    color: #007bff;
}

对应的HTML结构调整：

<nav class="navbar1">
    <div class="nav-left">
        <img src="./Logo.png" alt="OpenStax logo" width="120px" height="30px" class="logo">
        <p class="navpara">Access. The future of education.</p>
        <div class="dropdownmenu">
            <button onclick="toggleDropdown(this)" class="dropdownbtn">Subjects</button>
            <div class="dropdown-content">
                <a href="">All</a>
                <a href="">Business</a>
                <a href="">College Success</a>
                <a href="">Humanities</a>
                <a href="">Science</a>
                <a href="">Social Sciences</a>
            </div>
        </div>
        <div class="dropdownmenu">
            <button onclick="toggleDropdown(this)" class="dropdownbtn">Technology</button>
            <div class="dropdown-content">
                <a href="">OpenStax Assignable</a>
                <a href="">OpenStax Kinetic</a>
                <a href="">OpenStax Technology Partners</a>
            </div>
        </div>
        <div class="dropdownmenu">
            <button onclick="toggleDropdown(this)" class="dropdownbtn">What We do</button>
            <div class="dropdown-content">
                <a href="">About us</a>
                <a href="">Team</a>
                <a href="">Research</a>
                <a href="">K12 Books & Resources</a>
                <a href="">Institutional Partnership</a>
                <a href="">Technology Partnership</a>
                <a href="">Webinars</a>
            </div>
        </div>
    </div>
    <div class="nav-right">
        <Button class="givebtn">Give</Button>
        <button class="loginbtn">Login</button>
    </div>
</nav>

内容的提问来源于stack exchange，提问作者Wahid Ahmad Rustaqi

仿制OpenStax网站下拉菜单遇实现难题，寻求技术指导

HTML代码 #

CSS代码 #

JavaScript代码 #

1. 修复核心功能问题 #

2. 样式优化（贴近OpenStax风格） #

HTML代码

CSS代码

JavaScript代码

1. 修复核心功能问题

2. 样式优化（贴近OpenStax风格）