简单的CSS修改 - 使用<li>的不同背景图像

Question

我正在尝试做一些相对简单的事情，在列表对象中我需要使用包含公共属性的列表对象指定不同的背景图像。

我知道有一种方法可以设置每<li>的值，但我在某处错过了这条船。

我基本上是尝试将自定义背景图片添加到：ul.dropdown li。

body{
	margin: 0px;
	padding: 0px;
	background: #333;
	font-family: 'Lato', sans-serif;
}



nav{
	width: 1000px;
}

ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
	
	
}

ul.dropdown{ 
  position: relative; 
  width: 100%; 
	
}

ul.dropdown li{
	font-weight: bold;
	float: left;
	width: 200px;
	position: relative;
	border-style: solid;
	border-width: 1px 1px 0px 0px;
	border-color: #20587D;
	background-color: #2b75a6;
	background-image:url(images/btn-back2.png);
	background-position: left;
	background-repeat: no-repeat;

	/*box-shadow: 5px 5px #cccccc;*/

  
  
}

ul.dropdown li.one { 	}






ul.dropdown a:hover{ 
  color: #000; 
	
}

ul.dropdown li a { 
  display: block; 
  padding: 10px 10px 8px;
  color: #fff; 
  position: relative; 
  z-index: 2000; 
  text-align: center;
  text-decoration: none;
  font-weight: 300;


}



/*li.dropdown.icon-efr {
	  background:url(images/btn-back2.png) 0 center no-repeat;
	
}*/

ul.dropdown li a:hover,
ul.dropdown li a.hover{ 
  background: #20587D;
  position: relative;
  color: #fff;

	
}




ul.dropdown ul{ 
 display: none;
 position: absolute; 
  top: 0; 
  left: 0; 
  width: 180px; 
  z-index: 1000;
}

ul.dropdown ul li { 
  font-weight: normal; 
  background: #20587D; 
  color: #000; 

}

ul.dropdown ul li a{ 
  display: block; 
  color: #C3C3C3 !important;
  background: #20587D !important;
} 

ul.dropdown ul li a:hover{
  display: block; 
  background: #20587D !important;
  color: #fff !important;
} 

.drop > a{
  position: relative;
}

.drop > a:after{
  content:"";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}

.drop > a:hover:after{
  content:"";
   border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}

<nav>
<ul class="dropdown">           
        <li class="drop"><a href="#">E-Forms <br>Repository </a>
            <ul class="sub_menu">
              <li><a href="#">Lorem</a></li>
              <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                        <li><a href="#">Lipsum</a></li>
                        <li><a href="#">Consectetur </a></li>
            </ul>
        </li>
        <li class="drop"><a href="#">Downtime <br>Processing</a>
            <ul class="sub_menu">
                <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                        <li><a href="#">Lipsum</a></li>
                        <li><a href="#">Consectetur </a></li>
            </ul>
        </li>
        <li class="drop"><a href="#">E-Signature<br></a>
            <ul class="sub_menu">
                <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                        <li><a href="#">Lipsum</a></li>
                        <li><a href="#">Consectetur </a></li>
            </ul>
        </li>
        <li><a href="#">No Menu</a>
        </li>
    </ul>
 </nav>

非常感谢任何帮助 - thx