折叠导航没有背景

Question

我的网站上有一个有效的响应式导航栏，但由于某种原因我无法添加背景，有什么帮助吗？

＆＃13;

＆＃13;

$(".navigation-toggle").click(function() {
  $("li").toggleClass("navigation-open");
});

＆＃13;

 body{
  background-color: red;
 }


.navigation {
  background-color: #fff;
  height: 70px;
}
.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  display: block;
  color: #000;
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
}
.navigation-name {
  float: left;
  height: 50px;
  padding: 10px 25px;
  font-size: 18px;
  text-decoration: none;
  font-weight: bold;
}
.navigation-toggle {
  display: none;
  font-size: 34px;
  font-weight: bold;
  position: relative;
  float: right;
  padding: 6px 12px;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.navigation-open {
  display: block !important;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .navigation li {
    display: none;
  }
  .navigation-toggle {
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<nav class="navigation">
  <button class="navigation-toggle">☰</button>
  <a class="navigation-name" href="#">Architect</a>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Examples</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

我希望在li元素中添加纯白色背景，但正如我所说，我不能。

以下原始sass代码：

＆＃13;

＆＃13;

.navigation
    background-color: #fff
    height: 70px
    ul
        list-style-type: none
        margin: 0
        padding: 0
        overflow: hidden
        background-color: #fff
    li
        display: inline-block

    a
        display: block
        color: #000
        text-align: center
        padding: 24px 16px
        text-decoration: none

.navigation-name
    float: left
    height: 50px
    padding: 10px 25px
    font-size: 18px
    text-decoration: none
    font-weight: bold

.navigation-toggle
    display: none
    font-size: 34px
    font-weight: bold
    position: relative
    float: right
    padding: 6px 12px
    margin-top: 0px
    margin-right: 15px
    margin-bottom: 0px
    background-color: transparent
    background-image: none
    border: 1px solid transparent
    border-radius: 4px
    cursor: pointer
    outline: none

.navigation-open
    display: block !important
    background-color: #fff
    text-align: center
    margin: 0 auto





@media (max-width : 768px)
    .navigation 
        li
            display: none

    .navigation-toggle
        display: block

＆＃13;

＆＃13;

＆＃13;