images for menu items

HI
I am trying to have images (each menu item images is 110x 74px) as menu items to look as in the image in the first link in the private content.
I have attached the images ok with:
#menu-item-1548 a {
background-image: url(http://tinyartist.com/wp2/wp-content/uploads/2015/07/tvMenu1.png)!important;
background-repeat: no-repeat!important;
}
etc

The problem is trying to get the eight menu images in two neat rows. I have messed around a bit to try and work it out without much success. The current quick CSS is

.html_main_nav_header #top .main_menu .menu {width:56% !important;}
.main_menu { top: 20px !important;}
span.avia-menu-text { opacity: 0; }
.main_menu ul:first-child > li a { height: 74px!important; }
.html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a { padding-right: 11px; }

which gives the result in the second link.

Is this doable?

many thanks

Peter