Styling list item menu

Question

I have a menu which works on hover. The list of items is given below. I want to style it in such a way that the image appears on the extreme left hand side and the text on the extreme right hand side.

HTML:

<td style="width:30px" class="tableIconHambMenuBlackBgOnly">
    <ul id="css3menu1">
        <li> 
             <a href="#" title="Hamburger Menu">
                 <span><img src="./images/hamburgMenu_16px_Black.png" width="16px" height="16px" alt=""></span>
             </a>
            <ul>
                <li><a href="#"><img src="./images/img1.png" alt="">text1</a>
                </li>
                <li><a href="#"><img src="./images/img2.png" alt="">text2</a>
                </li>
                <li><a href="#"><img src="./images/img3.png" alt="">text3</a>
                </li>
                <li><a href="#"><img src="./images/img4.png" alt="">text4</a>
                </li>
            </ul>
        </li>
    </ul>
</td>

I have tried inserting divs but the layout breaks.

CSS:

ul#css3menu1,ul#css3menu1 ul{
	list-style:none;background-color:none;border-width:0px;border-style:transparent;display:inline-block;}
ul#css3menu1 ul{
	visibility:hidden;position:absolute;right:30px;top:0;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:#transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:4px 4px 0px;}
ul#css3menu1 li:hover>ul{
	visibility:visible;opacity:1; z-index:9999;}
ul#css3menu1 li{
	width:200px;position:relative;display:block;font-size:0;border-width:1px;}
ul#css3menu1 li:hover{
	}
ul#css3menu1 ul ul{
	position:absolute;right:100%;top:0;-moz-box-shadow:0px 0px 0px #63dbc3;-webkit-box-shadow:0px 0px 0px #63dbc3;box-shadow:0px 0px 0px #63dbc3;}
ul#css3menu1{
	width:20px;font-size:0;position:absolute;display:block;float:left;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin-top:6px;}
ul#css3menu1>li{
	width:30px;margin:-12px 0px 0px -30px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px ROsans,Arial,sans-serif;color:#000000;cursor:pointer;padding:0px 2px;background-color:transparent;border-width:0px;border-style:transparent;}
ul#css3menu1 ul li{
	float:right; margin:-6px 2px 0px 1px;}
ul#css3menu1 ul a{
	text-align:left;padding:10px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:12px ROsans,Arial,sans-serif;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	border-style:none;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul#css3menu1 ul li img{
	border:none;vertical-align:middle;margin-right:20px;padding-left:5px;}
ul#css3menu1 span{
	display:block;overflow:visible;background-image:url("arrowsub.gif");background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
	background-image:url("arrowsub.gif");padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#fbead9;color:#000000;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
	background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
	background-color:#f6d4b2;}

Answer 1

I'd use a background image since it's extremely unlikely that these images are content. Styling should be in the CSS.

li {
  background-position: center left 4px;
  background-repeat: no-repeat;
  line-height: 1.25rem;
  width: 200px;
  text-align: right;
  list-style-type: none;
  border: 1px solid red;
  padding: 4px;
  margin-bottom: 4px;
}
li.home {
  background-image: url(http://lorempixel.com/output/abstract-q-c-16-16-5.jpg);
}
li.contact {
  background-image: url(http://lorempixel.com/output/abstract-q-c-16-16-4.jpg);
}

<ul>
  <li class="home">Home</li>
  <li class="contact">Contact</li>
</ul>

As a bonus, it makes the HTML much cleaner and allows for hover effects.

Answer 2

you can add a float to the image like a float:left and on the li you can put text align right..

ul#css3menu1 li { text-align:right}
ul#css3menu1 li img {float:left}

that way you can keep the html same