Create menu using images using css in html - html

Question

I'm new in HTML and CSS.
Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
when we hover mouse on menu item, image and text color should change.
It should be look like as per image.
sry I forgot to upload the code, uploading here.
but now I want to show some menu items on left side( left align) and others on right side( right align)
.mainmenu{
background-color: black;
}
.mainmenu {
margin-top: 20px;
display: inline-block;
position: relative;
width: 100%;
}
.mainmenu li a {
display: block;
position: relative;
text-decoration: none;
text-align: center;
font-size: 10px;
color: gray;
line-height: 32px;
font-weight: bold;
text-shadow: black 0 1px 0;
font-family: sans-serif;
border-right: 1px solid #030304;
border-left: 1px solid #36393C;
white-space: nowrap;
}
.mainmenu ul.menu {
margin: 0;
width: 100%;
}
.mainmenu ul.menu li {
float: left;
list-style: none;
width: 16.666666666666668%;
}
.mainmenu ul.menu li a:hover {
color: #76b900;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
<div>
<div class="mainmenu ">
<ul class="menu">
<li>
<a href="#">
<img src="images/nav-icons/home.png">HOME</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/users.png">
USERS
</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/gallary.png">
GALLARY
<a/>
</li>
<li>
<a href="#">
<img src="images/nav-icons/community.png">
COMMUNITY
</a>
</li>
</ul>
</div>
Thanks

Answer 1

ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px;
/* To sift text off the background-image */
color: #3E789F;
background: url("../images/mySprite.png") no-repeat;
/* As all link share the same background-image */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
<ul class="menu">
<li class="firefox">Firefox
</li>
<li class="chrome">Chrome
</li>
<li class="ie">Explorer
</li>
<li class="opera">Opera
</li>
<li class="safari">Safari
</li>
</ul>