为什么无序列表后面的背景颜色没有变化？

Question

我正在尝试在导航栏中创建带有搜索栏的导航栏。问题在于，导航栏的无序列表部分后面的背景颜色与页面的其余部分一样只是白色。它不应该是我设定的背景颜色吗？ HTML

<div class="topnav">
    <ul>
        <li><a routerLink="/"> Home </a></li>
        <li><a routerLink="/"> Home </a></li>
    </ul>

    <div class="searchbar input-group col-md-4">
        <input class="form-control py-2" type="search" placeholder="Search..." id="example-search-input">
        <span class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">
                <i class="fa fa-search"></i>
            </button>
        </span>
    </div>

</div>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.searchbar {
  float:right;
  background-color: #f3f3f3;
}
.topnav {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}