样式应用于错误的地方

Question

请帮助，我想在子菜单的最后一个元素和子菜单元素的文本缩进中添加一个边框，但由于某种原因它只是应用了页面顶部的所有内容，请选择看下面的图片，它会出于某种原因在页面顶部应用更改而不是自己的元素！

用于实时预览：http://leo.meeped.co.uk/

提前致谢。

以下是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>

这是CSS代码：

body{
    line-height: 120%;
}

/*Additions*/
.scrollable{
    overflow: auto;
    -webkit-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: .2s, .2s;
    transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, linear;
    transition-timing-function: linear, linear;
    -webkit-overflow-scrolling: touch;
}

/*Pages Overall Styling*/ #Page{
    position: relative;
    padding-top: 0px;

    z-index: 2;

    -webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    -3px 0px 20px rgba(0, 0, 0, 0.25);
    box-shadow:         -3px 0px 20px rgba(0, 0, 0, 0.25);  
}

/*Content Containers Overall Styling*/.content{
    width: 800px;
}   

/*Header Containers Overall Styling*/#headerContent{
    max-width: 100%;
    height: 100%; 

    position: fixed;
    margin: auto; 
}

#wrapperHeader{
    background-color: #2D3B53;
    border-bottom: none;

    width: 230px;
    height: 100%;

    position: fixed;
    padding: 0px;

    z-index: 1;
}

/*Main Header Elements*/
.headerLogo, #LogoImage{
    display: none;
}

#headerMenu{
    max-width: 230px;
    float: none;
}

/*Main Menu*/
#MainMenu li{
    padding: 0px;
    float: none;
}

#MainMenu a{
    color: #E0E5EE; 
    border-bottom: 1px solid #253145;   

    width: 100%;
    line-height: 50px;

    text-align: left;  
    text-indent: 20px; 
    float: left; 

   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}       

#MainMenu a:hover{
    color: #B8C4D8; 
    background-color: #3D567B;
}   

#MainMenu a.active{
    display: none;
}

#MainMenu li a.getStartedButton{
    color: #74ADB4;
}

#MainMenu li a.getStartedButton:hover{
    background-color: #74ADB4;
    color: #D4E6E8;
}       

/*SubMenu*/
ul.subMenu{
    background-color: #33435F;
    border: 1px solid #DDDDDD;

    display: none;
    padding: 0;
    position: relative;
    top: 0; left: 0;

    -webkit-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
    box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
}

.subMenu li{
    width: 230px;
    border-bottom:1px solid #DDDDDD;
}

/*Second Header Container & Elements (Hidden From Widescreen)*/
#SecondHeader{
    background-color: #3D5273;

    width: 100%;
    line-height: 50px;
    text-align: left;

    display: inline-block;
}

.SecondHeader-button{
    color: #FFFFFF;
    background: #3D5273 url('../../assets/elements/nav-icon.png') no-repeat 10px center;

    font-size: 15px;
    font-weight: bold;
    text-indent: 45px; 

    display: inline-block;
}

/*////////////////////////////*/

Answer 1

使用伪类：像这样的last-child：

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

Answer 2

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