修复子菜单：实现Tab切换或悬停时显示

我来帮你搞定这三个菜单问题，咱们一步步调整代码来实现需求：

1. 让子菜单在鼠标悬停和Tab聚焦时显示 #

原来的CSS只处理了鼠标悬停的情况，我们需要添加:focus-within伪类来支持键盘导航时的聚焦显示，同时调整子菜单的定位规则确保默认隐藏：

/* 替换原有的hover/focus规则 */
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
    display: block;
    left: auto;
}

/* 修改子菜单默认样式，确保默认隐藏且定位正确 */
.main-navigation ul ul {
    position: absolute;
    top: 100%; /* 从父菜单项底部开始，避免向上覆盖 */
    left: 0;
    background-color: #e8eaeb;
    z-index: 9999;
    display: none; /* 默认隐藏 */
    padding: 0.5em 0;
}

:focus-within会在菜单项内的任何元素（比如链接）获得焦点时触发，完美支持Tab键导航的场景。

2. 移除箭头按钮并取消点击触发子菜单 #

首先，把HTML里所有的<button class="menu-item-expand">元素删掉。然后简化JavaScript代码，去掉所有处理子菜单点击切换和箭头旋转的逻辑：

$(function() {
    var currentItem = "";
    $( 'nav li').on('click', function(e){
        console.log('handling menu click event: ', $(this).attr('id'), ": ", (currentItem ? currentItem.attr('id'): ""));
        $(this).closest('nav').find('li, span').removeClass('active');
        
        if ( $(this).hasClass( 'menu-item-has-children' ) ) {
            $(this).find('> span').addClass('active');
        } else {
            $(this).addClass('active');
        }
        
        console.log('done setting active');
        if ( $(this).hasClass('menu-item-has-ancestor') ) {
            console.log('setting parent active ', $(this).parent().closest('span.menu-item-text'));
            $(this).parent().closest('li').find('span.menu-item-text').addClass('active');
            e.stopPropagation();
        } 

        currentItem = $(this);
    });
});

最后在CSS里删除和箭头按钮、点击切换相关的样式：

/* 删除以下冗余样式 */
.main-navigation .menu-list-toggle-closed {
    display:none;
}
.main-navigation button.menu-item-expand {
    display: inline-block;
    padding: .25em;
    margin-left: .5em;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(90deg);
}

/* 恢复带子菜单的链接的正常内边距 */
.main-navigation .menu-item-has-children > a {
    padding-right: 1em;
}

3. 调整布局避免子菜单覆盖页眉 #

关键是把子菜单的top属性设置为100%，这样它会刚好从父菜单项的底部开始显示，不会向上延伸覆盖页眉。如果你的页眉是固定定位的，还可以给页眉设置更高的z-index确保它在菜单上方：

/* 确保页眉在菜单之上（如果页眉有固定定位的话） */
.header {
    position: relative;
    z-index: 10000; /* 比子菜单的z-index 9999高 */
}

同时检查主菜单的padding-top，确保它和页眉之间有足够的间距，避免菜单本身和页眉重叠。

完整修改后的代码示例 #

JavaScript

$(function() {
    var currentItem = "";
    $( 'nav li').on('click', function(e){
        console.log('handling menu click event: ', $(this).attr('id'), ": ", (currentItem ? currentItem.attr('id'): ""));
        $(this).closest('nav').find('li, span').removeClass('active');
        
        if ( $(this).hasClass( 'menu-item-has-children' ) ) {
            $(this).find('> span').addClass('active');
        } else {
            $(this).addClass('active');
        }
        
        console.log('done setting active');
        if ( $(this).hasClass('menu-item-has-ancestor') ) {
            console.log('setting parent active ', $(this).parent().closest('span.menu-item-text'));
            $(this).parent().closest('li').find('span.menu-item-text').addClass('active');
            e.stopPropagation();
        } 

        currentItem = $(this);
    });
});

CSS

.main-navigation {
    display: block;
    clear: left;
}
.main-navigation a, .main-navigation a:visited, .main-navigation span.menu-item-text {
    display: inline-block;
    padding: .5em 1em .5em 0;
    text-decoration: none;
    color: #3e3d3c;
}
.main-navigation a:hover, .main-navigation a:focus {
    text-decoration: underline;
}
.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation > ul {
    padding-top: 1em;
}
.main-navigation li {
    position: relative;
}
.main-navigation .active {
    background-color: #c5ddfc;
}
.main-navigation ul li {
    padding-left: 1em;
}
/* 子菜单显示规则 */
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
    display: block;
    left: auto;
}
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #e8eaeb;
    z-index: 9999;
    display: none;
    padding: 0.5em 0;
    min-width: 200px;
}
.main-navigation ul ul ul {
    top: 0;
    left: 100%;
}
.main-navigation .menu-item-has-children > a {
    padding-right: 1em;
}
/* 页眉层级设置（按需添加） */
.header {
    position: relative;
    z-index: 10000;
}

HTML（移除箭头按钮后的示例）

<nav id="primary-nav" class="main-navigation">
    <ul id="menu-item-1" class="menu-top">
        <li id="menu-item-2" class="menu-item">
            <a href="/page-about_the_collection.php">
                <span>About the<br />Collection</span>
            </a>
        </li>
        <li id="menu-item-3" class="menu-item">
            <a href="/xtf/search?brand=plastics&collection=plastics&objectType=Artifact"> Objects </a>
        </li>
        <li id="menu-item-4" class="menu-item">
            <a href="/xtf/search?brand=plastics&collection=plastics&objectType=findingaid&sort=title"> Manuscripts </a>
        </li>
        <li id="menu-item-5" class="menu-item menu-item-has-children">
            <a href="#">Resources</a>
            <ul>
                <li class="menu-item"><a href="#">Guides</a></li>
                <li class="menu-item"><a href="#">Tutorials</a></li>
            </ul>
        </li>
    </ul>
</nav>

内容的提问来源于stack exchange，提问作者user2747541