复刻W3Schools乐队模板时子菜单padding设置正确但尺寸偏小问题

核心问题原因 #

• HTML结构嵌套错误：你将.subnav下拉列表嵌套在了MORE按钮的<a>标签内部，<a>作为行内元素不允许嵌套<ul>这类块级元素，会导致浏览器解析DOM结构异常，干扰样式计算。
• 子菜单内边距参数错误：你设置的子菜单链接样式为padding: 0 16px，仅设置了左右内边距，缺少原站要求的上下8px内边距，直接导致子菜单项高度偏小。
• 未清除列表默认样式：浏览器对<ul>元素默认自带左内边距、上下外边距，你的.subnav没有重置这些默认属性，会出现额外缩进、留白异常的塌陷问题。
• 子菜单行高继承错误：子菜单链接继承了父级导航的line-height: 46px属性，和你设置的padding参数叠加后实际尺寸和预期不符。

修复代码 #

修正后HTML结构 #

<div id="header">
    <ul id="nav">
        <li><a href="">HOME</a></li>
        <li><a href="">BAND</a></li>
        <li><a href="">TOUR</a></li>
        <li><a href="">CONTACT</a></li>
        <li>
            <a href="">MORE</a>
            <ul class="subnav">
                <li><a href="">Merchandise</a></li>
                <li><a href="">Extras</a></li>
                <li><a href="">Media</a></li>
            </ul>        
        </li>
    </ul>
</div>

修正后CSS样式 #

/* 重置ul默认样式 */
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav li {
    position: relative;
}

#nav > li {
    display: inline-block;
}

#nav li a {
    text-decoration: none;
    line-height: 46px;
    padding: 0 24px;
    display: block;
}

#nav li:hover .subnav {
    display: block;
}

#nav .subnav {
    display: none;
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
}

#nav .subnav a {
    color: #000;
    padding: 8px 16px;
    line-height: 1.5;
}

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