add color to HTML Menu

.navigation {
  width: 300px
}

.mainmenu,
.submenu {
  list-style: none;
  padding: 0;
  margin: 0
}

.mainmenu a,
.mainmenu label {
  display: block;
  background-color: #f9f9f9;
  text-decoration: none;
  padding: 18px;
  color: #000
}

.mainmenu input {
  display: none
}

.mainmenu a:hover {
  background-color: #c5c5c5
}

.mainmenu :checked+.submenu {
  display: block;
  max-height: 900px
}

.submenu a {
  background-color: #ddd
}

.submenu a:hover {
  background-color: #993
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all .5s ease-out
}

<nav class="navigation"><ul class="mainmenu"><li><a href="">Home</a></li><li><a href="0" title="0">0</a></li><li><a href="" title="AFazenda 11"> A</a></li><li><a href="" title="">B</a></li><li><a href="" title="">C</a></li><li><label for="products">1</label><input type="checkbox" id="products" /><ul class="submenu" itemscope='itemscope' itemtype='http://www.schema.org/SiteNavigationElement'><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'> </a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'></a></li><li itemprop='name'><a href='' itemprop='url'> I</a></li><li itemprop='name'><a href='' itemprop='url'> II</a></li><li itemprop='name'><a href='' itemprop='url'> III</a></li></ul></li></ul></nav>