Css 应用于错误位置的样式

请帮助，我试图简单地在我的子菜单的最后一个元素添加边框，并为子菜单元素添加文本缩进，但出于某种原因，它只应用页面顶部的所有内容，请看下面的图片，它应用页面顶部的更改是出于某种原因，而不是它自身的元素

对于实时预览：

提前谢谢

以下是HTML代码：

<header>
    <div id="wrapperHeader">
        <div class="scrollable" id="headerContent">
            <section class="headerLogo">
                <a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a>
            </section>
            <section id="headerMenu">
                <nav id="MainMenu"> 
                    <ul class="MainMenu">
                        <li><a class="active" href="index.html">Home</a></li>
                        <li><a class="SubMenu" href="#">Portfolio</a>
                            <ul class="subMenu">
                                <li><a href="web-design.html">Web Design</a></li>
                                <li><a href="visual-identity.html">Visual Identity</a></li>
                                <li><a href="photography.html">Photography</a></li>
                            </ul>
                        </li>
                        <li><a href="testimonials.html">Testimonials</a></li>
                        <li><a href="about.html">About Me</a></li>
                        <li><a href="contact.html">Get In Touch</a></li>
                        <li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
                    </ul>
                </nav>
            </section>
        </div>
    </div>
</header>

---

使用伪类：最后一个子类，如下所示：

nav ul li:last-child {
    //style
}

---

子菜单和子菜单是一样的吗？如果是这样，您需要在HTML中更改它。也许这就是你问题的答案？

我知道mate，但它现在只是将所有内容应用到顶部部分，而不是它们自己的元素，不知道发生了什么：/JS中没有子菜单用于激活切换，对于子菜单，但子菜单实际上包含元素和样式：/I我发现子菜单继续从主菜单输入一些样式，如填充，我不知道如何更改它！即使我给它自己的布丁，它仍然会使用一次应用到主菜单。有什么想法吗？请

nav ul li:last-child {
    //style
}