simple css

gistfile1.html

<ul class="list">
	<li class="film"><a href="search/label/film">Film</a></li>
	<li class="theatre"><a href="search/label/film">Theatre</a></li>
	<li class="music"><a href="search/label/film">Music</a></li>
	<li class="lyrics"><a href="search/label/film">Lyrics Case</a></li>
	<li class="quotes"><a href="search/label/film">Quotes。</a></li>
	<li><img 135px width="135" src="http://farm4.static.flickr.com/3430/3378859683_329df186f2_m.jpg" width: /></li>
	<li class="life"><a href="search/label/film">Life</a></li>
	<li class="wonders"><a href="search/label/film">Wonders</a></li>
	<li class="travel"><a href="search/label/film">Travel</a></li>
	<li class="stories"><a href="search/label/film">Stories</a></li>
	<li class="sentiments"><a href="search/label/film">Sentiments</a></li>
</ul>

<style type="text/css" media="screen">
	ul.list {
		color: #ffffff;
		list-style-type: none;
		text-align: left;
		font-size: 19px;
		width: 135px;
	}
	li.img { padding: 0px; margin: 0px;}
	li.film { background: #FAE9B2; }
	li.film:hover { background:#cab16d; }
	li.theatre { background: #989977; }
	li.theatre:hover { background: #7d9d8b; }
	li.music { background: #7188A6; }
	li.music:hover { background: #6c6d83; }
	li.lyrics { background: #A8C1CF; }
	li.lyrics:hover { background: #9ce0e6; }
	li.quotes { background: #E9DFAE; }
	li.quotes:hover { background: #e6d58f; }
	li.life { background: #CD89A0; }
	li.life:hover { background: #ad355e; }
	li.wonders { background: #F9FDFC; }
	li.wonders:hover { background: #6a6a6a; }
	li.travel { background: #F5C2B4; }
	li.travel:hover { background: #e4806f; }
	li.stories { background: #EAAE8B; }
	li.stories:hover { background: #cc845a; }
	li.sentiments { background: #A4A4A4; }
	li.sentiments:hover { background: #ffffff; }
</style>