ナビゲーションメニューに個別に背景色をつけたいのですが

Question

あああの背景色は青
いいいの背景色は緑
うううの背景色は黄色

っといった感じにするのはどのようにすればいいのでしょうか？
調べようと思ったのですが、どんなワードで検索すればいいのかわからず困ってます。

<ul class="global-nav">
  <li><a href="#">あああ</a></li>
  <li><a href="#">いいい</a></li>
  <li><a href="#">ううう</a></li>
  <li><a href="#">えええ</a></li>
  <li><a href="#">おおお</a></li>
</ul>

.global-nav {
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid #aaa;
  font-size: 13px;
  list-style-type: none;
}
/*clearfix*/
.global-nav:after {
  content: "";
  clear: both;
  display: block;
}
.global-nav li {
  float: left;
  width: 50%;
  text-align: center;
  border-bottom: 1px solid #aaa;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*奇数のli要素に適応*/
.global-nav li:nth-child(odd) {
  border-right: 1px solid #aaa;
}
.global-nav a {
  display: block;
  line-height: 44px;
  color: #000;
  text-decoration: none;
}
.global-nav a:hover {
  color: #000;
  background: #e6e6e6;
}
/*横幅1280px以上に適応*/
@media screen and (min-width: 1280px) {
.global-nav li:nth-child(odd) {
  border-right: none;
}
.global-nav {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-top: none;
  border-collapse: collapse;
}
.global-nav li {
  float: none;
  display: table-cell;
  width: 100%;
  border-bottom: none;
  border: 1px solid #aaa;
}
.global-nav li:nth-child(odd) {
  border-right: 1px solid #aaa;
}
.global-nav a {
  display: block;
  line-height: 44px;
  color: #000;
  text-decoration: none;
}
.global-nav a:hover {
  color: #000;
  background: #e6e6e6;
}
}

Comments

[Lhankor_Mhy]

HTMLを変更してもいいのですか？

[panisyo]

大丈夫です！

[m.ts10806]

classつければいいと思うのですけど、
これ、自身で書いたコードですよね？